今日はanimationについて学んだ。

参考


#13 キーフレームでアニメーション (1) | CSS3入門 - プログラミングならドットインストール


#14 キーフレームでアニメーション (2) | CSS3入門 - プログラミングならドットインストール

昨日の続きのような感じなので、似たようなものだった。
これもまとめて指定可能。

animation-name keyframeの名前
animation-duration アニメーションにかかる時間
animation-timing-function アニメーションの動作を指定できる
animation-delay 何秒後にアニメーションを開始するか
animation-iteration-count アニメーションを繰り返す回数
animation-direction 逆再生と普通の再生を指定できる



@-webkit-keyframesの後に決めた名前を付けてあげる。

実際に指定するとこんな感じになる。

@-webkit-keyframes animationTest {
0% { width: 50px; background: orange;}
50% { width: 100px; background: blue;}
100% { width: 150px; background: yellow;}
}

animation-directionでinfiniteと指定すると、永遠に繰り返してて面白い。

参考


animation-CSS3リファレンス