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