繰り返す動きを作る@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のように数字を書くと、その回数だけ動いて止まります。

もう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で無限ループ
4. 自動で繰り返す動きは@keyframes、反応する動きはtransition