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度の状態にしています。これで最初の最後の2つのキーフレームが定義されたことになり、0%と100%の間の状態は、ブラウザが自動的に補間します。

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA