css3のanimationを使ってみたら予想以上に簡単だった！
css3のanimationをwebサイトでちょこちょこ見かけるようになったので試してみました。
デモを作ってみましたので、ご覧下さい。
横に動かしつつ、縦にもちょっと動いていてフワフワと動いているイメージです。
animationの設定方法
こちらでは説明を簡単にするため、DEMOの一番したのアニメーションの説明をします。
liにanimationを設定します。
|
1 2 3 4 5 | position: absolute; animation: moveY 2s infinite alternate linear; -ms-animation: moveY 2s infinite alternate linear; -webkit-animation: moveY 2s infinite alternate linear; -moz-animation: moveY 2s infinite alternate linear; |
この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なるものが必要です。
|
1 2 3 4 5 | @keyframes moveY { 0% {top:0px;} 50% {top:30px;} 100% {top:0px;} } |
上述してあるanimation-nameはこの@keyframesで記述した名前になります。
0%~100%でanimation-durationの時間の間の動きの設定をします。
この動きを各ブラウザで対応させるために、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | @-ms-keyframes moveY { 0% {top:0px;} 50% { top:15px;} 100% {top:0px;} } @-webkit-keyframes moveY /* Safari and Chrome */ { 0% {top:0px;} 50% { top:15px;} 100% {top:0px;} } @-moz-keyframes moveY /* Firefox */ { 0% {top:0px;} 50% { top:15px;} 100% {top:0px;} } |
も記載します。
このkeyframesとanimationの設定が別々にできるのがちょっとミソで、
keyframesが同じものでも、時間やイージング、繰り返しの設定で違うアニメーションが作ることができます。
また、animationは複数指定ができるので、複雑な動きもやろうと思えば設定できます。
デモの1つ目と2つ目は、複数指定しています。
cssは以下のようになってます。
同じkeyframesを使用していますが、alternateや時間、delayの設定で少し違う動きになっています。
|
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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | .gly li.move1 { position: absolute; animation: moveY 2s infinite alternate linear, moveX 12s infinite alternate linear; -ms-animation: moveY 2s infinite alternate linear, moveX 12s infinite alternate linear; -webkit-animation: moveY 2s infinite alternate linear, moveX 12s infinite alternate linear; -moz-animation: moveY 2s infinite alternate linear, moveX 12s infinite alternate linear; } .gly li.move2 { margin: 200px 0 0 -300px; position: absolute; animation: moveY 2s infinite alternate ease-in, moveX 14s infinite normal linear; -ms-animation: moveY 2s infinite alternate ease-in, moveX 14s infinite normal linear; -webkit-animation: moveY 2s infinite alternate ease-in, moveX 14s infinite normal linear; -moz-animation: moveY 2s infinite alternate ease-in, moveX 14s infinite normal linear; -webkit-animation-delay: 2s; } @keyframes moveY { 0% {top:0px;} 50% { top:30px;} 100% {top:0px;} } @-ms-keyframes moveY { 0% {top:0px;} 50% { top:15px;} 100% {top:0px;} } @-webkit-keyframes moveY /* Safari and Chrome */ { 0% {top:0px;} 50% { top:15px;} 100% {top:0px;} } @-moz-keyframes moveY /* Firefox */ { 0% {top:0px;} 50% { top:15px;} 100% {top:0px;} } /* 横の動き */ @keyframes moveX { 0% {left:0px;} 100% {left:88%;} } @-ms-keyframes moveX{ 0% {left:0px;} 100% {left:88%;} } @-webkit-keyframes moveX /* Safari and Chrome */ { 0% {left:0px;} 100% {left:88%;} } @-moz-keyframes moveX /* Firefox */ { 0% {left:0px;} 100% {left:88%;} } |
ちなみに対応ブラウザはIE以外は大丈夫で、
IEは10からになります。
がっつりとした動きはまだクライアントワークでは難しいかもしれませんね・・・
ただ、自分的には、デモの一番下のような動きであれば、ありかなと思っています。
その場合、IE9以下では動かずにそのまま写真が見え、それ以外のブラウザではリッチな表現として、
動きがついていると言った形です。
この程度であれば動きがあろうがなかろうが、ユーザーが得る情報としては同等なのでいいと思います。
このような考え方は、プログレッシブエンハンスメントといい、僕はこれに大賛成です。
POINT4：プログレッシブエンハンスメントとは？－すぐに使えるCSSデザインテクニック 第2回 – MdN Design Interactive
cssでできるなんて簡単だし、時間も節約できます！
素晴らしい！！
ちょっとした動きなら、どんどん実践して試してみたいですね！
Author Profile
スターフィールド編集部
SHARE
