3_3 CSS Animationsのポイント

CSS Animationsを作成する手順をまとめると、次のようになります。

1. アニメーションさせたい要素のCSSクラスで、animationプロパティを設定する。
2. キーフレームを定義する。

animation: breeze 2s ease-in-out 3 alternate;

というコードは、キーフレームアニメーションの名前、時間、タイミング関数名、アニメーションの再生方向を指定します。

キーフレームは、@keyframesで始まる@keyframesルールの書き方で定義します。これは、@keyframes宣言の後に半角開けてアニメーション名をつづけ、その後{ と }を加えて、{と}の間に、キーフレーム（キーフレームスタイルルール）を記述する方法です。

@keyframes breeze{
    0%{
      transform: rotate(20deg);
    }
    100%{
      transform: rotate(-20deg);
    }
}

ここでは、0%のとき（最初の状態）から20度回転させておき（つまり最初から少し斜めになっている）、100%のとき（最後の状態）、-20度の状態にしています。これで最初の最後の２つのキーフレームが定義されたことになり、0%と100%の間の状態は、ブラウザが自動的に補間します。

キーフレームの定義では、アニメーションにかける時間は関係しません。時間を決めているのは、animationプロパティに指定した2sという値です。

ブラウザは、animationプロパティの値と、キーフレームの情報を見て、アニメーションの具体的な動作、つまり、開始後何秒の時点では、何度回転させておくべきか、を決めます。