CSS3では、jQuery等を使うことなく、アニメーションを実装することができます。

 

これまで、CSS3のアニメーションの存在は知っていたのですが、どのように実装するのかはあまりよくわかっていませんでした。

http://photoshopvip.net/archives/23678

↑こちらのサイトでクリックしたくなるボタンについて学習していたところ、

中にCSS3アニメーションを利用したものがあり(http://tutorialzine.com/2010/10/css3-animated-bubble-buttons/)面白かったので、

CSS3アニメーションの学習もかねて、実際に作ってみることにしました。

 

今回は、水面をイメージしたボタンを作ってみることにしました。

こちらが作ったもの↓

DEMO

 

方法

 

手順1

まず、アニメーションに利用する画像を準備します。

マウスをボタンに重ねたときに、ボタンが凹んで、水面のように波紋が広がるアニメーションにします。

ボタンの画像と、波紋の画像を重ねて表示するため、２つの画像を準備しました。

ボタンの画像

 

波紋の画像

（波紋の画像の作り方はこちらを参考にさせていただきました→http://vanet.kakoku.net/photo_19.html）

 

手順2

HTMLでボタンを設置します。

html

XHTML

<p><a href="#" id="button1">PUSH</a></p> <p><a href="#" id="button2">PUSH</a></p>

1 2	<p><a href="#" id="button1">PUSH</a></p> <p><a href="#" id="button2">PUSH</a></p>

 

 CSS

CSS

*{ margin: 0; padding: 0; } body{ background: #fff; } p{ width: 50px; height: 50px; margin: 100px; } p{ display: block; width: 90px; height: 90px; padding: 5px; background: url(../images/button.png) no-repeat; background-position: 0 0; } p:hover{ background-position: 0px -100px; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

*{ margin: 0; padding: 0; } body{ background: #fff; }   p{ width: 50px; height: 50px; margin: 100px; } p{ display: block; width: 90px; height: 90px; padding: 5px; background: url(../images/button.png) no-repeat; background-position: 0 0; } p:hover{ background-position: 0px -100px; }

波紋をaタグでアニメーションするため、ボタンは外側の背景画像で描画しました。

 

手順3

いよいよアニメーションの実装です。

CSS3のアニメーションにはいくつかのやり方があるようですので、今回は２つのやり方を使ってみることにしました。

 

１つめ(#button1)は、「animation」を使った方法です。

こちらは、タイムラインでアニメーションの動きを設定する方法です。

まず、pタグの中で、波紋を表示する範囲になるようにaタグを配置します。

 

次に、hover時のアニメーションを設定します。

「animation-name」で名前を設定し、「animation-duration」でアニメーションの時間を設定し、

「@keyframes [設定した名前]」でタイムライン(今回は%で指定)ごとの動きを設定します。

波紋の画像を徐々に表示しながら、大きさを拡大することで、波紋を表現しました。

これで１つ目のアニメーションが実装できました。

 

２つ目(#button2)は、「transition」を使った方法です。

こちらは、hoverでない状態と、hoverの状態を、ぱっと切り替えず、

指定した時間で状態をスムーズに変化させることでアニメーションする方法です。

まず、1つめと同様に設置しますが、プラスして、「transition: [属性] [変化にかける時間]」で変化させる属性と変化にかける時間を設定します。

次にhover時の状態を指定します。

これで２つ目のアニメーションが実装できました。

 

「animation」による実装の場合、タイムラインごとの細かなアニメーションが設定できる代わりに、

アニメーションの途中でhoverをやめると、アニメーションが中断してしまうという特徴があります。

 

逆に「transition」を使った方法では、タイムラインごとの細かなアニメーションの設定はできませんが、

アニメーション中にhoverをやめても、アニメーションでスムーズに戻るという特徴があります。

 

必要に応じてどちらの方法を使うか、選ぶことが良いようです。