CSSのみでアニメーション動作を可能とするCSS3の機能Transition。
海外のサイトではもうすでにCSS3アニメーションを実装しているサイトを見かけることもちらほら。

そんなCSS3アニメーションのテクニックを紹介しているサイトは多く見かけますが、
ここではCSS3アニメーションを実行させるタイミングに関してサンプルをもとに紹介してみます。

サイト上にアニメーションを組み込む際、その動作を実行させるタイミングは
——————————
・ページロード時
・マウスオーバー時
・クリック時
——————————
とパターンがあると思います。
今回はこの3パターンでのCSS3 Transitionを実行させる方法のサンプル。
サンプルでは上記3つの状況で、画像が回転するアニメーションを実装させます。
※動作環境は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プロパティでアニメーションを実行させるパターンのサンプルになります。

動作サンプルを3つまとめたページはこちら

この3つの実行パターンを組み合わせれば
サイト上にいろんな形でCSSアニメーションを実装できると思われます。

まだPCサイトでは、このCSS Transition対応ブラウザはwebkitのみなので
使用するには制限が掛かってしまいますが、
iPhone向けサイトなどでは基本的には対象ブラウザがSafariのみになり、
CSS3をほぼフルに組み込むことが可能になるので、
CSSを使ったアニメーションが必要になる機会は今後増えていく気がしています。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (2)

  • CSS(CSS3)のみでスライド画像ギャラリーを作る方法 | BlackFlag | 2010.12.07 18:39

    [...] 先日、CSS3 Transitionでのアニメーション実行パターンを紹介しましたが、 今回はスクリプト系を使用せずにCSS(CSS3)のみで形成する スライド画像ギャラリーのサンプルを紹介してみます [...]

  • おし、プログラミング | 2011.02.18 23:40

    CSS3 アニメーション – ポインポイン

    CSS3について 従来のCSSは配色とか形をデザインしかできなかったが、 新しく加わったCSS3は動きをデザインできる。(例:変形、移動、変色) サンプル 文字が上下に動くサンプル <html>…







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

CSS3 Transitionプロパティでアニメーションを実行させるパターン【ページロード/マウスオーバー/クリックアクション】

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR