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

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