CSS3のアニメーション

CSS3によるアニメーションは大きく分けて、トランジションとアニメーションの2つに分けられます。

transitionとanimationとの比較

transition

  • 動かすために:hoverなどのきっかけが必要
  • トランジションでは実行後に元のプロパティ値に戻る
  • 比較的簡単な記述で動かすことが可能

 

animation

  • transitionより細かい設定が可能
  • 記述が複雑
  • @keyframesの記述が必要

 

animation関連のプロパティ

animation-name

@keyframesで定義した名前を指定します。名前を指定しないとアニメーションは実行されません。

 

animation-duration

1回分のアニメーションを実行する時間の長さを指定します。

 

animation-timing-function

アニメーションのタイミングや進め方を指定します。

ease(初期値)  最初と最後を滑らかに変化

ease-in  一定の速度で変化

ease-out  最初をゆっくり変化

ease-in-out  最後をゆっくり変化

linear  最初と最後をゆっくり変化

 

animation-delay

要素が読み込まれてからアニメーションがいつ始まるかを指定します。初期値は0。

 

animation-iteration-count

アニメーションを繰り返す回数を数字で指定します。無限ループにするにはinfiniteを指定。初期値は1。

 

animation-direction

アニメーションを繰り返す方向を指定します。

normal  通常の方向で再生(初期値)

alternate  奇数回で通常・偶数回で反対方向に再生

revers  逆方向に再生

alternate-revers  alternateの逆方向に再生

 

animation-fill-mode

アニメーションのディレイ中と再生後の表示を指定します。

none(初期値)

forwards  再生後、最後のキーフレームの状態を保持。

backwards  再生後、最初のキーフレームの状態を適用。

both  forwardsとbackwardsの両方を適用。

 

animation-play-state

アニメーションの再生と一時停止を指定することができます。

running(初期値)

none