Blog

CSS3のアニメーションを使ったボタン

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

 

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

http://photoshopvip.net/archives/23678

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

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

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

 

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

こちらが作ったもの↓

DEMO

 

方法

 

手順1

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

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

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

ボタンの画像

ボタンの画像

 

波紋の画像

波紋の画像

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

 

手順2

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

html

 

 CSS

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

 

手順3

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

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

 

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

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

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

 

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

 

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

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

 

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

 

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ