CSS animation

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

　ただし、文字の変化や色彩の変化と行った CSS を利用したアニメーションに限ります。キャラクターを動かすや動画のようなアニメーションではありません。

　混乱を避けるために、ここでは CSS アニメーションと呼びます。

　CSS アニメーションの設定方法には２種類あります。@keyframes で詳細に動きを設定する方法と簡易に transition プロパティを使用する方法です。

　@keyframes で詳細に動きを設定する方法は以下です。

1.@keyframes で CSS アニメーション名と動作を定義する。

@keyframes anime_name {
  from {...}
  to {...}
}

2.定義した CSS アニメーション名を各タグエレメントの 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	上記の一括指定ができます。