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


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


The following two tabs change content below.
RZS
記憶に残るしくみを創造する・・・ 静岡からWEBSITEプロデュース、宣伝周知全般[WEBプロデュース・各種企画・デザイン・制作・運営・販売]]、各種印刷物・販促物[企画・デザイン・制作]を主にしてます。 なんでも屋として、皆さまに重宝!?されております!