Blog

css3のanimationを使ってみたら予想以上に簡単だった!

2014.06.11Cat:css3 デザイナー

css3のanimationをwebサイトでちょこちょこ見かけるようになったので試してみました。

デモを作ってみましたので、ご覧下さい。

DEMO

横に動かしつつ、縦にもちょっと動いていてフワフワと動いているイメージです。

 

animationの設定方法

こちらでは説明を簡単にするため、DEMOの一番したのアニメーションの説明をします。

liにanimationを設定します。

このanimationの設定の解説をしますと、
括弧内は上記の場合の文字・数値です。

animation-name(moveY)、animation-duration(2s)、animation-iteration-count(infinite)、animation-delay(設定なし)、animation-direction(alternate)、animation-timing-function(linear)、をスペースで区切って指定します。

順番は変わっても大丈夫かと思います。

 

それぞれの説明をすると、

animation-name・・・アニメーション名を指定する
⇒ こちらは自由に設定。後ほどkeyframesで設定します。

animation-duration・・・アニメーション一回分の時間の長さを指定する

animation-timing-function・・・アニメーションのタイミング・進行割合を指定する
⇒ ease、linear、ease-in、ease-out、ease-in-outのいずれかのキーワード

animation-delay・・・アニメーションがいつ始まるかを指定する

animation-iteration-count・・・アニメーションの繰り返し回数を指定する

infinite:無限に再生を繰り返す
数値:数値で再生回数を指定する(初期値は1)

animation-direction・・・アニメーションを交互に反転再生させるかどうかを指定する
⇒ alternate:奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す

参考サイト:
animation-CSS3リファレンス

 

しかし、これだけで動きません!

keyframesなるものが必要です。

上述してあるanimation-nameはこの@keyframesで記述した名前になります。

0%~100%でanimation-durationの時間の間の動きの設定をします。

この動きを各ブラウザで対応させるために、

も記載します。

このkeyframesとanimationの設定が別々にできるのがちょっとミソで、
keyframesが同じものでも、時間やイージング、繰り返しの設定で違うアニメーションが作ることができます。

また、animationは複数指定ができるので、複雑な動きもやろうと思えば設定できます。

デモの1つ目と2つ目は、複数指定しています。
cssは以下のようになってます。

同じkeyframesを使用していますが、alternateや時間、delayの設定で少し違う動きになっています。

ちなみに対応ブラウザはIE以外は大丈夫で、
IEは10からになります。

がっつりとした動きはまだクライアントワークでは難しいかもしれませんね・・・

ただ、自分的には、デモの一番下のような動きであれば、ありかなと思っています。
その場合、IE9以下では動かずにそのまま写真が見え、それ以外のブラウザではリッチな表現として、
動きがついていると言った形です。
この程度であれば動きがあろうがなかろうが、ユーザーが得る情報としては同等なのでいいと思います。
このような考え方は、プログレッシブエンハンスメントといい、僕はこれに大賛成です。

POINT4:プログレッシブエンハンスメントとは?-すぐに使えるCSSデザインテクニック 第2回 – MdN Design Interactive

cssでできるなんて簡単だし、時間も節約できます!
素晴らしい!!

ちょっとした動きなら、どんどん実践して試してみたいですね!

Author Profile

Y.A
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ