トランジションの機能を拡張したもので、CSS3アニメーションという物があります。トランジションと同じようにプロパティの値を変化させることで効果を実現します。トランジションでは変化の始まりと終わりのスタイルのみを指定することに対して、アニメーションでは「キーフレーム」を設定することにより、完了までのスタイルの変化をポイントごとに細かく指定できるという違いがあります。
@keyframes
キーフレームは、@keyframesを使います。
キーフレームの名前：
@keyframesで設定するキーフレームに名前(今回はtest1)をつける。この名前はanimation-nameプロパティでアニメーションを適用する要素と、実行するキーフレームを結びつけるために使います。
キーフレームの指定：
スタイルがどのように変化するのを、アニメーションの任意のポイントごとに書式を指定します。ポイントはアニメーションの時間に対するパーセンテージで表し、そのパーセンテージ時点のプロパティと値を書きます。開始時は「0% 又は from」、完了時は「100% 又は to」となり、これらは必ず指定します。
animation-nameプロパティ
アニメーションを実行するには、アニメーション効果を適用する要素に対して、利用するキーフレームとアニメーションの時間を指定しなければなりません。利用するキーフレームを指定するには、animation-nameプロパティを使います。
animation-nameの設定値
・none アニメーションを実行しない
・キーフレーム名 @keyframesに付けたキーフレーム名を指定する。
複数アニメーションを適用するときは、それぞれのキーフレーム名を「,」カンマで区切ってかきます。
animation-duraitonプロパティ
アニメーションを実行するには、、アニメーションの時間を措定します。
複数アニメーションを実行時間を変えて適用するときは、それぞれに対応する時間を「,」カンマで区切ってかきます。
サンプルコードの実行結果はこちら
|
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 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>アニメーションを利用する</title> <style> *{margin:0;padding:0;} div{ width:100px; height:100px; position:absolute; background-color:pink; } .anime1{ -webkit-animation-name:test1; animation-name:test1; -webkit-animation-duration:5s; animation-duration:5s; } @-webkit-keyframes test1{ 0%{left: 0px;top: 0px;} 40%{left:100px;top: 0px;} 70%{left:100px;top:100px;} 80%{left:140px;top:180px;} 90%{left: 50px;top: 80px;} 100%{left: 0px;top: 0px;} } @keyframes test1{ 0%{left: 0px;top: 0px;} 40%{left:100px;top: 0px;} 70%{left:100px;top:100px;} 80%{left:140px;top:180px;} 90%{left: 50px;top: 80px;} 100%{left: 0px;top: 0px;} } p{} </style> </head> <body> <div class="anime1"><p>test</p></div> </body> </html> |