cssのキーフレームアニメーションと使ってみる

-
カテゴリー:
CSS 

まだ、対応ブラウザの事など考えると利用頻度は少ないのですが、CSSによるキーフレームアニメーションを試してみました。

 

まずHTMLです。

上記のball.jpgをキーフレームアニメーションで動かします。
次にアニメーションをさせるimg要素のCSSを記述。

animation-name: キーフレーム名でキーフレームを設定。
animation-timing-functionでアニメーションの進行速度の割合を設定。※linear、ease-in、ease-out、ease-in-out等
animation-iteration-countでアニメーションさせる回数の設定。ここでは、infiniteを指定し、無制限に行っています。
animation-durationで1回のアニメーションにかかる時間の設定。4s=4秒。

 

次に、キーフレーム本体のCSSの記述です。

 

@keyframes キーフレーム名 { アニメーション処理 }のように記述を行います。
上記記述では@-webkit-keyframes キーフレーム名 { アニメーション処理 }とベンダープリフィックスをつけたキーフレームも記述していますが、iphoneでの動作を念頭に入れた記述を行っています。

アニメーションの内容はtransform: translate(X座標,Y座標)で座標を動かし、決められた枠内の移動を繰り返す内容です。
 

サンプルはこちら