CSSのみでアニメーション動作を可能とするCSS3の機能Transition。
海外のサイトではもうすでにCSS3アニメーションを実装しているサイトを見かけることもちらほら。
そんなCSS3アニメーションのテクニックを紹介しているサイトは多く見かけますが、
ここではCSS3アニメーションを実行させるタイミングに関してサンプルをもとに紹介してみます。
サイト上にアニメーションを組み込む際、その動作を実行させるタイミングは
——————————
・ページロード時
・マウスオーバー時
・クリック時
——————————
とパターンがあると思います。
今回はこの３パターンでのCSS3 Transitionを実行させる方法のサンプル。
サンプルでは上記３つの状況で、画像が回転するアニメーションを実装させます。
※動作環境はCSS3 Transition対応ブラウザのSafariやGoogleChrome［webkit］のみです。
まず、CSSでの画像を回転させるアニメーションの定義。
CSS3でのアニメーション定義は「@-webkit-keyframes」を使用します。
「@-webkit-keyframes ○○○○」の○の部分に任意の定義名が入ります。
◆CSS
@-webkit-keyframes rotateArea {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
ここではアニメーション実行定義名を「rotateArea」として、
「-webkit-transform」で画像を360度回転させています。
そして一つ目のサンプル。
ページロード時にアニメーション実行するパターン。（云わばオートスタート）
CSS3 TRANSITION ANIMATION 【AUTO START】
◆HTML <div id="auto_start"> <img src="img/photo.jpg" width="250" height="188"> </div><!--/#auto_start-->
ページロードと同時に＜img＞タグを回転させる指示を加えます。
CSSでは対象物に対して直に「-webkit-animation-」の指定を付加します。
◆CSS
#auto_start img {
-webkit-animation-name: rotateArea;
-webkit-animation-delay: 0.5s;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
}
「-webkit-animation-name」で実行させるアニメーション定義名を指定。
「-webkit-animation-delay」はアニメーション開始時の遅延時間の指定。（0.5秒遅らせています。）
「-webkit-animation-duration」はアニメーション実行時間の指定。（3秒で一回転します。）
「-webkit-animation-iteration-count」はアニメーション実行回数の指定。（「infinite」は無限ループ。回数を指定する場合は数字で指定。）
これを実行させると以下の様な感じに。
これがCSS3アニメーションの基本動作になります。
続いてマウスオーバー時にアニメーションを実行させるサンプル。
CSS3 TRANSITION ANIMATION 【HOVER START】
◆HTML <div id="hover_start"> <img src="img/photo.jpg" width="250" height="188"> </div><!--/#hover_start-->
基本的にHTMLソースはオートスタート実行の場合と同じですが、
動作判別をさせるためにid名だけ変えてあります。
◆CSS
#hover_start img:hover {
-webkit-animation-name: rotateArea;
-webkit-animation-delay: 0;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
}
ページロード時と違い、対象物のプロパティに直に指定を加えるのではなく
対象物（＜img＞タグ）にマウスオーバーした時点（:hover）で
「rotateArea」アニメーションを実行させる、という指定にするだけです。
これを実行させると以下の様な感じに。（画像にマウスオーバーしてください。）
最後はクリック時にアニメーションを実行させるサンプル。
CSS3 TRANSITION ANIMATION 【CLICK START】
◆HTML <div id="click_start"> <img src="img/photo.jpg" width="250" height="188" id="action"> <div id="control"> <a href="#action">START</a> | <a href="#">STOP</a> </div><!--/#control--> </div><!--/#click_start-->
別途、動作をスタート（ストップ）させるためのリンクを設置しています。
対象物（＜img＞タグ）にはid（名前は任意）を付け、
動作スタートさせるリンクのhrefは対象物のid名にしておきます。
CSSは以下のように。
◆CSS
#action:target {
-webkit-animation-name: rotateArea;
-webkit-animation-delay: 0.5s;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
}
オートスタートやマウスオーバー時とは違い、
対象物が「:target」された時に「rotateArea」アニメーションを実行させます。
「:target」はURLの最後に対象idが付いた状態。
【例：http://www.○○○○.co.jp/index.html#action】
これを実行させると以下の様な感じに。（「START」のリンクをクリックしてください。）
クリックさせるポイントはアニメーションを実行させる対象物自体にすることも可能です。
以上が、CSS3 Transitionプロパティでアニメーションを実行させるパターンのサンプルになります。
この３つの実行パターンを組み合わせれば
サイト上にいろんな形でCSSアニメーションを実装できると思われます。
まだPCサイトでは、このCSS Transition対応ブラウザはwebkitのみなので
使用するには制限が掛かってしまいますが、
iPhone向けサイトなどでは基本的には対象ブラウザがSafariのみになり、
CSS3をほぼフルに組み込むことが可能になるので、
CSSを使ったアニメーションが必要になる機会は今後増えていく気がしています。