CSS3 アニメーション機能を使ってみた animation
前回記事では、transitionプロパティを使って、アニメーション機能を実現しました。
今回は、animationプロパティを使ってみたいとおもます。
animationプロパティ
animationは、どの段階でどの値がどう変化するのかを記した
キーフレームという特別な書式 を使用します。
transitionは、二点間の移動を表現していましたが、
animationは、
早速動かしてみました。（以下）
ボックスにマウスをおくと、拡大しながら下へ移動し、再び元の位置に戻ってきます。
追加ソースコードは以下です。
|
1 2 3 |
<div class="animation_test3"> テスト </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
div.animation_test3{ width: 100px; height: 100px; color: #fff; background: #999; transform: translate(100px, 0px) scale(1.0, 1.0); -webkit-transform: translate(100px, 0px) scale(1.0, 1.0); } div.animation_test3:hover { animation-name: test_box; animation-duration: 10s; -webkit-animation-name: test_box; -webkit-animation-duration: 10s; } @keyframes test_box { 50% { transform: translate(100px, 300px) scale(2.0, 2.0); } 100% { transform: translate(100px, 0px) scale(1.0, 1.0); } } @-webkit-keyframes test_box { 50% { -webkit-transform: translate(100px, 300px) scale(2.0, 2.0); } 100% { -webkit-transform: translate(100px, 0px) scale(1.0, 1.0); } } |
@keyframs書式
上記ソースコードの
@keyframesと記載されている箇所がキーフレームの設定になります。
決めれれた時間内の中で度のタイミングでどの値がどう変化するのかを記載します。
また、@keyframesの後には、キーフレームの名前を指定し、ここでつけた名前を
animation-nameプロパティに指定することでアニメーションが実行されます。
今回は、時間が50%進んだ時に、translateで縦方向に300px移動させ、
scaleを2.0にすることで、拡大させています。
そして、100%進んだ時に、縦方向の位置ととscaleを最初の値に戻すことで、元の位置へ戻しています。
animationプロパティ
animation-name
キーフレームを名前で指定して実行させるためのプロパティです。
今回は、test_boxという名前で設定しています。
animation-duration
アニメーションの再生時間を設定
今回は、10sを設定しています。
今回指定したもの以外にも以下のものがあります。
animation-timing-function
再生速度の変化パターンを設定
| ease | 加速をつけて、ゆっくり始まり、ゆっくり終わる |
| ease-in | ゆっくり始まり、一定速度で終わる |
| ease-out | 一定速度で始まり、ゆっくり終わる |
| ease-in-out | ゆっくり始まり、ゆっくりと終わる |
| ease-in-out | ゆっくり始まり、ゆっくりと終わる |
| linear | 最初から最後まで一定の速度で変化 |
animation-delay
アニメーション再生開始を遅らせる
animation-iteration-count
何回繰り返し再生するかを設定
animation-direction
逆再生させるかどうか、繰り返し再生中にどのタイミグで逆再生させるかを設定
| nomal | 常にキーフレーム通りに再生 |
| reverse | 常に逆再生 |
| alternate | 繰り返しの際、キーフレーム通りの再生と逆再生を繰り返す |
| alternate-reverse | 繰り返しの際、逆再生とキーフレーム通りの再生を繰り返す |
animation-play-state
再生を一時停止
| running | アニメーションを再生可能な状態にする |
| paused | 一時停止状態にする |
animation-fill-mode
animation-delayでの再生が遅延されている間の表示、
また、再生終了時の表示設定
| forwards | 再生後は100%表示のままにする |
| backwards | 再生遅延中は、0%表示にする |
| both | 再生遅延中は、0%表示、再生後は100%表示にする |
| none | @keyframes{}内の指定とは無関係に表示 |
最後に
以上、CSS3のanimationプロパティでアニメーション機能を使ってみました。
キーフレームを細かく設定すれば、transitionよりも複雑な動きが実現できそうです。
ただし、対応していないブラウザなどもあるようなので
その辺りも考えて使ったほうがよさそうです。
参考になれば幸いです。
参考書籍↓
スポンサーリンク
