CSS3のアニメーションってスゴい！
先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。
ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。
SafariやChromeなどwebkitブラウザで表示してみてください。
※PLAYボタンをクリックすると表示されますよ
見れない人のために動画も撮ってみました。
どうですか？CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。
今回はこのCSSのアニメーションのチュートリアルをご紹介します。
「NEW!」というアイコンが、1文字ごとにぴょこんぴょこん跳ねるアニメーションを作ってみましょう。
上記のdemoでいうと二つ目の動きです。
HTML
<p class="animetionNew arrange02 group"><span class="letter01">N</span><span class="letter02">e</span><span class="letter03">w</span><span class="letter04">!</span></p>
ちょっと分かりにくくなってますが、一文字ずつspanで囲って、全体をpタグで囲っています。
それぞれにclassをふって、一文字ずつアニメーションをつけていきます。
CSS
アニメーションを定義して使いまわそう
一文字ずつアニメーションをつけるのって、ちょっと大変そう…と思いました？
大丈夫です。実際はそこまで大変じゃないんです。
なぜなら、アニメーションを定義して使いまわせるから！
では実際のコードを見てみましょう。
@-webkit-keyframes letterAnimation2 {
0%{
bottom: 0;
}
70% {
bottom: 0;
}
85% {
bottom: 7px;
}
100% {
bottom: 0;
}
}
これが「跳ねる」アニメーションです。
注目！
1行目に注目してください。「letterAnimation2」とあるのがわかりますか？
これがこのアニメーションの名前です。
この名前でアニメーションを呼び出して使うことができるんですね。
そして、以下につづく0%、70%、、、、という記述。
これはタイムラインのようなものだと考えてください。
10秒のアニメーションだったら、0秒のときは「bottom: 0;」、7秒の時は「bottom: 0;」、8.5秒の時は「bottom: 7px」（ジャンプ！）、10秒のときに「bottom: 0;」（着地！）、といった具合です。
ちょっと面倒くさいですが、これはチマチマと手作業で調整するしかないので頑張ってください。
定義したアニメーションを使おう
jsdo.itのdemoに記述したCSSからアニメーションに関係ある部分だけを抜き出してみました。
p.animetionNew.arrange02 span{
position: relative;
bottom: 0;
-webkit-animation-name: letterAnimation2; /*定義したアニメーションの名前*/
-webkit-animation-duration: 1.5s; /*1ループの時間*/
-webkit-animation-timing-function: ease-out; /*アニメーションの変化の度合い*/
-webkit-animation-iteration-count: infinite; /*無限にループさせる*/
}
span要素は、「NEW!」を一文字ずつマークアップしてあるやつですね。
注目！
まず、今回はジャンプさせるアニメーションなので、
あらかじめ position: relative; と bottom: 0; を設定しておきます。
続く4行でアニメーションを呼び出し、アニメーションに関する設定をしています。
- -webkit-animation-name は定義したアニメーションの名前を指定します。今回は「letterAnimation2」ですね。
- -webkit-animation-duration はアニメーションが1ループするのにかかる時間です。「1.5s」つまり1.5秒としてみました。
- -webkit-animation-timing-function はアニメーションの緩急のつけかたに関する設定です。この指定をうまく使うと、気持ちのいいアニメーションをつくることができます。
- -webkit-iteration-count はアニメーションする回数の指定です。「infinite」で無限にループさせています。
ここまでの指定で、跳ねる動きを1.5秒で無限回ループさせることができました。
アニメーションの開始時間を１文字ごとにずらそう
これが最後のステップです。
先程span要素にアニメーションを設定しましたが、いまのままでは全部の文字が同時に飛び跳ねてしまいます。
アニメーションの開始時間をずらす指定をしていきましょう。
p.animetionNew.arrange02 span.letter02{
-webkit-animation-delay: 0.2s;
}
p.animetionNew.arrange02 span.letter03{
-webkit-animation-delay: 0.4s;
}
p.animetionNew.arrange02 span.letter04{
-webkit-animation-delay: 0.6s;
}
注目！
- -webkit-animation-delay はアニメーションの開始時間を遅らせる指定です。今回は0.2秒ずつ開始時間を遅らせています。
完成です！
以上を踏まえた上で、もう一度demoを見ていただくと理解が深まるかと思います。
もし「こんな動きもできるんじゃない？」と思った方は、ぜひぜひこのdemoをフォークして、自分なりのアニメーションを作ってみてください！
でも、まだ実務で使えないよね？
たしかに、CSS3のアニメーションはブラウザの対応状況もまちまちだったりで、
すべてのユーザーに同じ体験を提供するのは難しいかもしれません。
でもどうでしょう、今回のデモのような、
NEW!のアイコンがちょっと主張しているような表現の場合を考えてみてください。
たとえNEW!のアイコンが止まっていてもユーザーにまったく意味が通じなくなる、なんてことはないですよね。
対応しているブラウザを使っている人にだけ、ちょっとリッチな体験を提供する。
それくらいおおらかな気持ちでCSSアニメーションを取り入れていけばいいのかな、なんて思っています。
（プログレッシブ・エンハンスメントってやつですね）
最後にお得なお知らせです
業務拡大につき、マークアップエンジニア（コーダー）の採用エントリー受付中ですー！
たくさんのご応募ありがとうございます。まだまだエントリー受け付けているので、ぜひぜひよろしくお願いします！
しかも今なら！
ぼくが個人的に引越しを全力でお手伝いするキャンペーン中です！！！！！