繰り返す動きを作る@keyframes

transitionは:hoverなどきっかけがあって初めて動きました。今回学ぶ@keyframesは違います。ページを開いた瞬間から、自動で・繰り返し動かせます。

自動でふわふわ動くバッジ

カーソルを乗せなくても、勝手に動いています。

@keyframesの書き方

<div class="badge">NEW</div>

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

• @keyframes の後ろのfloatは名前（自分で好きに決めてよい）
• 0%・50%・100%は、動きのタイミング（0%＝開始、100%＝終了）
• それぞれの{ }の中に、そのタイミングでの見た目を書く

0%は開始位置なので省略してfrom、100%は終了位置なのでtoとも書けます。タイミングが2つだけならこちらもよく使われます。

animationプロパティで読み込む

台本を書いただけでは動きません。要素にanimationで適用します。

<div class="badge">NEW</div>

.badge {
  animation: float 1.6s ease-in-out infinite;
}

infiniteの代わりに3のように数字を書くと、その回数だけ動いて止まります。

行って戻るはalternateにおまかせ

さきほどのfloatは、0%→50%→100%と行って戻る台本を自分で書きました。じつは「行き」だけ書いて、帰りはブラウザにまかせる書き方もあります。それがalternate（オルタネート＝交互）です。

<div class="badge">NEW</div>

.badge {
  animation: float 0.8s ease-in-out infinite alternate;
}
@keyframes float {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}

alternateをつけると、1周目はfrom→to、2周目はto→fromと逆再生され、往復の動きになります。台本が半分で済むうえ、行きと帰りの動きが必ず対称になるのが利点です（1周の時間も半分の0.8sにしています）。

開始をずらすanimation-delay

複数の要素に同じ動きをつけると、全部がそろって動いて機械的に見えがちです。animation-delayで開始をずらすと、ぐっと生きた感じになります。

<div class="dot"></div>
<div class="dot dot--2"></div>
<div class="dot dot--3"></div>

.dot {
  animation: float 1s ease-in-out infinite alternate;
}
.dot--2 {
  animation-delay: 0.2s;
}
.dot--3 {
  animation-delay: 0.4s;
}

「読み込み中」を表す3つの点がぴょこぴょこ波打つあの動きは、この時間差で作られています。

もう1つ：回転し続けるスピナー

<div class="spinner"></div>

.spinner {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

回転のような「同じ動きをずっと繰り返す」演出は、イージングをlinear（一定速度）にするのが定番です。easeだと毎回速度が変わって、つなぎ目でカクッとして見えてしまいます。

このレッスンのまとめ

1. @keyframes 名前 { 0% {...} 100% {...} }で動きの台本を作る
2. animation: 名前 時間 イージング 回数;で要素に適用する
3. infiniteで無限ループ、alternateで往復、animation-delayで時間差
4. 自動で繰り返す動きは@keyframes、反応する動きはtransition