CSS3入門 13 14 キーフレームでアニメーション
今日は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と指定すると、永遠に繰り返してて面白い。
参考
