BLOG

2014年12月15日/ css, アニメーション,

CSS3を使った簡単なアニメーション作成方法その2(animationを使う)

こんにちわ、宮本です。

2014年も残りわずかとなってきましたね。

皆様、クリスマスの準備や忘年会など忙しい日々を過ごされているかと思います。

寒さも強くなってきたので、体調に気をつけ、良い新年を迎えられるよう残り半月頑張りましょう!

 

さて、前回css3transitionを使った簡単なアニメーション作成方法について記事を書かせていただきました。
▼そのときの記事はこちら
CSS3を使った簡単なアニメーション作成方法その1(transitionを使う)

 

今回はもう一つの方法、css3のanimationを使ったアニメーション作成方法をお伝えしたいと思います。

このanimationはtransitionを使うよりも、もう少し細かなアニメーション調整を行うことができますので、是非使ってみてください。

 

cssのanimationを使ってアニメーションを作る方法

animationは、transition同様にduration(変化にかける時間)などのプロパティを設定することができます。

プロパティは下記の通りです。

animation-name

アニメーションの変化をまとめたキーフレームの名前を設定
【記述例】animation-name:move1

animation-duration

変化にかける時間を設定。
【記述例】animation-duration:2s;

animation-timing-function

最初は早く、最後は遅く、また最初は早く、最後は遅くなど、アニメーションの速度変化を設定
【記述例】animation-timing-function:ease-out;

animation-delay

アニメーション開始までの時間を設定
【記述例】animation-delay:0s;

animation-iteration-count

アニメーションの繰り返し回数を設定
【記述例】animation-iteration-count:1;

animation-direction

アニメーションの繰り返し方(反転も入れるかなど)を設定
【記述例】animation-direction:normal;

 

詳しくは「animation-CSS3リファレンス」を参照ください。

 

上記はまとめて下記のように記載することも可能です。

【記述例】animation:move1 2s ease-out 0s 1 normal;

 

そして上記最初のプロパティであるanimation-nameに指定したキーフレーム(move1)を用意し、何をどう変化させていくかを記載していきます。

 

キーフレームの書き方は次のようになります。

 

animationを使ってみよう

実際にanimationを使ったものが下記となります。

 

・マウスを当てると赤い四角→青い四角に変化する

 

ソースは次のようになります。

■css

 

 

 

transitionと違うところは、変化の途中で別の変化を入れることができるところです。

 

先程は赤い四角が青い四角になりましたが、次は途中で黒に変化するように設定してみます。
大きさも変えてみます。

 

・マウスを当てると赤い四角→黒い四角→青い四角に大きくなりながら変化する

 

ソースは次のようになります。

■css

 

上記ソースの通り、keyframesの中に50%{background:black;}といった記述を付け加えております。

 

変化(赤→青)の間の丁度真ん中(50%)の状態(黒)を指定してあげることにより、四角が赤→黒→青といった変化をします。

 

0%→20%→50%→80%→100%といった変化も設定できます。

もちろん色や大きさ以外にも、位置を変更したり回転させたりといったことも可能です。

 

 

このcssのanimationとjqueryをうまく使えば、次のURLのようにガチャアニメーションを作ることも可能です。

→デモページ

ガチャアニメーションデモ

最後に

いかがでしたでしょうか。

いろいろと工夫すればクオリティの高いアニメーションも作成することが可能です。

皆様のWEBサイトにも是非使ってみてください!

Resent Posts

Category