備忘録的プログラミングリファレンス

CSS animation

 CSSで実装されているアニメーション機能の例です。JavaScript を利用しなくても CSS のみで表現できる動的表現があります。

- ad -

 設定方法は以下です。

1.@keyframesでアニメーション名と動作を定義する。
@keyframes anime_name {
  from {...}
  to {...}
}
2.定義したアニメーション名を各タグエレメントのanimation-nameプロパティやanimation-durationプロパティなどで反映させる。
div.test {
  animation-name: anime_name;
  animation-duration: 2s;
}

 CSSでアニメーションを設定するには以下のプロパティを利用します。

Property摘要
アニメーション定義
@keyframesアニメーションの元を定義します。
各エレメントに定義
animation-name@keyframesで定義した名称を指定します。
animation-duration完了するまでの時間を秒(sec)で指定します。
animation-delay動作を開始するまでの待ち時間を秒(sec)で指定します。
animation-iteration-count繰り返し回数を指定します。
animation-direction順方向、逆順と再生順を設定することができます。
animation-timing-function再生速度に変化をもたらすことができます。
animation-fill-mode再生されていない間のスタイルプロパティを設定します。
animation上記の一括指定ができます。