@keyframesで自分だけの動きを作る

ここまでのtransitionは「マウスを乗せたら変化する」ものでした。@keyframes（キーフレーム）を使うと、ページを開いただけで動き出したり、ずっと動き続けたりするアニメーションを自分で作れます。

♥

▲ どれもマウスを乗せなくても動き続ける

しくみ：「名前をつけた動き」を作って、要素に貼る

キーフレームアニメーションは、2つのパーツでできています。

@keyframes：動きの台本。「最初はこう、最後はこう」を書いて、名前をつける
animation：その台本を要素に貼りつけて、時間や回数を決める

手順1：@keyframesで動きを作る

from（最初）と to（最後）の状態を書きます。名前（ここでは bounce）は自由につけられます。

@keyframes bounce {
  from {
    transform: translateY(0);      /* 最初：元の位置 */
  }
  to {
    transform: translateY(-60px);  /* 最後：60px上 */
  }
}

手順2：animationで要素に貼る

.ball {
  animation: bounce 1s ease-in-out infinite alternate;
  /*         名前   時間 速さ        回数     向き */
}

infinite は「ずっと繰り返す」、alternate は「行って、戻る」を交互にする指定です。これで上のデモの左の玉のように、跳ね続けるアニメーションになります。

【ポイント】transitionとの違い
transitionは「AからBへの変化」を、きっかけ（:hoverなど）があったときだけ動かします。@keyframesは、途中の状態をいくつでも書けて、きっかけがなくても動かせます。

手順3：％で途中の状態を書く

from・to の代わりに％を使うと、途中の状態をいくつでも決められます。0% が最初、100% が最後です。上のデモの真ん中のハートは、こんな台本で「ドクン、ドクン」と鼓動しています。

@keyframes beat {
  0%, 100% { transform: scale(1); }     /* 最初と最後は同じ大きさ */
  15%      { transform: scale(1.25); }  /* 1回目：大きく */
  30%      { transform: scale(1); }
  45%      { transform: scale(1.15); }  /* 2回目：少し大きく */
}
.heart {
  animation: beat 1.2s ease-in-out infinite;
}

同じ状態はまとめて書ける

0%, 100% のようにカンマで区切ると、同じ状態をまとめて書けます。最初と最後をそろえると、繰り返したときにつなぎ目がなめらかになります。

手順4：いくつものプロパティを一緒に動かす

1つのキーフレームの中に、位置・回転・色・角の丸みなどを一緒に書けます。右の四角は、動きながら丸くなり、色も変わっています。

@keyframes move {
  0% {
    transform: translateX(0) rotate(0);
    background: #6b1f4f;
  }
  50% {
    transform: translateX(60px) rotate(180deg);
    background: #d4589c;
    border-radius: 50%;   /* 途中で丸くなる */
  }
  100% {
    transform: translateX(0) rotate(360deg);
    background: #6b1f4f;
  }
}

まとめ

@keyframesで動きの台本を作り、animationで要素に貼る
from／to、または 0%〜100% で状態を書く
infinite で繰り返し、alternate で行って戻る
最初と最後をそろえると、繰り返しがなめらか

次のレッスンでは、animationプロパティの細かい指定（遅れて始める、最後の状態で止める、順番に動かす）を覚えて、実際のサイトで使える演出に仕上げます。