CSSアニメーションで、ボタンをきれいに目立たせる。

2015.06.29

html5-css3

CSSも便利になったもので、アニメーション効果を持たせることができます。
企業サイトなどでは、あまり使うところがなかったのですが、さりげなくかつきれいに目立たせるために利用できそうでしたので、ボタンを制作してみました！

実際の動きは、こんな感じにプルンと。

プルンプルン

 

CSS3のアニメーション効果については、Webクリエイターボックスさんなどでわかりやすく説明しているの参考になりました。

●CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう | Webクリエイターボックス

 

上記ボタンの動きは、以下でできます。


<div class="btn_contact"><a href = "#" class="btn_inq anim">テキスト</a></div>



<style type="text/css">

.btn_contact {
  display: inline-block;
}

.anim {
  animation: prun 2.2s ease-in infinite;
  -webkit-animation: prun 2.2s ease-in infinite;
  -moz-animation: prun 2.2s ease-in infinite;
  -o-animation: prun 2.2s ease-in infinite;
  -ms-animation: prun 2.2s ease-in infinite;
}

@keyframes prun {
48%, 62% {transform: scale(1.0, 1.0)}
50% {transform: scale(1.1, 0.9)}
56% {transform: scale(0.9, 1.1) translate(0, -5px)}
59% {transform: scale(1.0, 1.0) translate(0, -3px)}
}

</style>

以上で、主要ブラウザ（IE、Chrome、Firefox、Safari、Opera、iOS Safari、Android Browser）にて、動けば制作完了でしたが、

Safari、iOS Safariでは、ピクリとも動かない（汗）

調べてみると、

「Firefox は、接頭辞 -moz- を必要とし、Chrome と Safari は、接頭辞 -webkit- を必要」らしい。

firefoxでは動いているので、

以下の、接頭辞 -webkit-をつけたcssを追記。


@-webkit-keyframes prun{
48%, 62% {-webkit-transform: scale(1.0, 1.0)}
50% {-webkit-transform: scale(1.1, 0.9)}
56% {-webkit-transform: scale(0.9, 1.1) translate(0, -5px)}
59% {-webkit-transform: scale(1.0, 1.0) translate(0, -3px)}
}

 これで、Safari、iOS Safariでも動きました！

シンプルなデザインで目立たせたい場合に、シンプルなデザインのまま、目立たせることができます。

こんな使い方も良いですね。

●Creative CSS3 Animation Menus

魅せるスマートフォンサイトを実現！CSS3アニメーション・ブック for iPhone & Android
外間かおり
【CSS3だけで実装するスマートフォンサイト用のアニメーションをすべて解説。 iPhoneとAndroidに向けたよりインパクトのあるスマートフォンサイトを作るために、CSS3のみを用いた 各種アニメーション効果のコーディングについて作例を通して解説したリファレンス＆チュートリアルです。】
CSS3デザインブック　仕事で絶対に使うプロのテクニック
MdN編集部
【よく見るあの表現から最先端のテクニックまでCSS3でできること・したいこと、ぜんぶ1冊でわかります。CSS/CSS3の基本も解説。IE対策を踏まえた実践テクニック。わかりやすい解説で応用力もUP。スマホサイトのアイデアも充実。 】