cssのキーフレームアニメーションと使ってみる
-
- カテゴリー：
- CSS
まだ、対応ブラウザの事など考えると利用頻度は少ないのですが、CSSによるキーフレームアニメーションを試してみました。
まずHTMLです。
|
1 2 3 |
<div class="ball_wrap"> <img alt="" src="http://sample.joyart.info/sample003/ball.jpg" /> </div> |
上記のball.jpgをキーフレームアニメーションで動かします。
次にアニメーションをさせるimg要素のCSSを記述。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.ball_wrap img { -webkit-animation-name: anim; animation-name: anim; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 4s; animation-duration: 4s; } |
animation-name: キーフレーム名でキーフレームを設定。
animation-timing-functionでアニメーションの進行速度の割合を設定。※linear、ease-in、ease-out、ease-in-out等
animation-iteration-countでアニメーションさせる回数の設定。ここでは、infiniteを指定し、無制限に行っています。
animation-durationで1回のアニメーションにかかる時間の設定。4s=4秒。
次に、キーフレーム本体のCSSの記述です。
|
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 |
@keyframes anim { 0% { transform: translate(0px, 0px); } 25% { transform: translate(290px, 0px); } 50% { transform: translate(290px, 170px); } 75% { transform: translate(0px, 170px); } 100% { transform: translate(0px, 0px); } } @-webkit-keyframes anim { 0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 25% { -webkit-transform: translate(290px, 0px); transform: translate(290px, 0px); } 50% { -webkit-transform: translate(290px, 170px); transform: translate(290px, 170px); } 75% { -webkit-transform: translate(0px, 170px); transform: translate(0px, 170px); } 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } |
@keyframes キーフレーム名 { アニメーション処理 }のように記述を行います。
上記記述では@-webkit-keyframes キーフレーム名 { アニメーション処理 }とベンダープリフィックスをつけたキーフレームも記述していますが、iphoneでの動作を念頭に入れた記述を行っています。
アニメーションの内容はtransform: translate(X座標,Y座標)で座標を動かし、決められた枠内の移動を繰り返す内容です。
サンプルはこちら
