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	上記の一括指定ができます。