simplecoreな毎日

アラフォー既婚男性の日々、子育て、その他雑記

2017.11.17

超簡単!GIFアニメとCSS3アニメーションで目立つボタンを作る

WEB

ランディングページなどを作っていて、ボタンを目立たせるためにGIFアニメの画像をよく使います。PCでもスマホでも同じような視覚効果を出せますし、そして何よりお手軽です。Photoshopからも書き出せますから。しかもFlashばりのトゥイーン付きで。

しかしこのGIFアニメ画像、欠点があります。不透明度を変更したり、オブジェクトを移動したりは簡単に出来るのですが、オブジェクトそのものを大きくしたり、小さくしたりすることが出来ません。

ただ、細かく作りこんだボタンよりも、単純にボタンの大きさが変わったりするだけの方が意外と目につきやすく、CTAとしては効果的なケースがあるのも事実。そこで、どうにか出来ないものか、と。それも簡単に。

CSS3アニメーションをつかったらすぐに解決した

答えは簡単でした。CSS3のアニメーションをつかえばいいだけの話です。ということで、オブジェクトを大きくしたり小さくしたりするCSSがこちらです。

.animationbanner{
  animation: animationFrames linear 4s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames linear 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
}

@keyframes animationFrames{
  0% {
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    transform:  scaleX(0.50) scaleY(0.50) ;
  }
  20% {
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  30% {
    transform:  scaleX(0.50) scaleY(0.50) ;
  }
  40% {
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  50% {
    transform:  scaleX(0.50) scaleY(0.50) ;
  }
  60% {
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  10% {
    -webkit-transform:  scaleX(0.50) scaleY(0.50) ;
  }
  20% {
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  30% {
    -webkit-transform:  scaleX(0.50) scaleY(0.50) ;
  }
  40% {
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  50% {
    -webkit-transform:  scaleX(0.50) scaleY(0.50) ;
  }
  60% {
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

後はアニメーション効果を与えたい要素(今回の場合は画像なので<img>)にanimationbannerというクラスを振ってあげるだけです。

書いてある内容を簡単に説明すると・・・

書いてあることは非常に簡単で、キーフレームのパーセンテージに合わせてオブジェクトの大きさを指定しているだけです。

animation: animationFrames linear 4s;

で、キーフレームの秒数を指定しています。

animation-iteration-count: infinite;

で、ループの回数を指定します。infiniteは無限ループ、回数を指定したい場合は数字を書きます。

@keyframes animationFramesの内容は、フレームが0%(最初)のときは原寸大、10%のときは横幅と高さが50%の大きさ、20%のときは原寸大に戻る・・・という感じでフレームが60%のときまでこれを繰り返しています。60%以降はアニメーションが終わるまで(フレームが100%になるまで)原寸大のまま、ということです。

以下がデモページになります。

DEMO

このデモでは、バナーの色が変わる部分はGIFアニメ、大きさが変わる部分はCSSのアニメーションをつかっています。

色が変わる部分もCSSで表現出来ると思いますが、この部分に関してはGIFアニメをつかった方が簡単に、お手軽に作れます。メンテナンスは少し面倒ですけど。

と、偉そうに書きましたが、下記のようなジェネレータをつかえばもっと簡単に複雑な動きを付けれます。

CSS3 Keyframes Animation Generator
Online tool for creating native CSS3 Keyframes Animation. You can easy and fast generate consistent CSS3 animation using simple UI without any coding.
時間にルーズな人間について思うこと

THOUGHT

時間にルーズな人間について思うこと

想像力の欠如が害になる

THOUGHT

想像力の欠如が害になる

プラグインなしで投稿記事内にソースコードを表示させる方法

WEB

プラグインなしで投稿記事内にソースコードを表示させる方法

【WordPress】カスタムフィールドをつかってスライダーを簡単に更新する

WordPress

【WordPress】カスタムフィールドをつかってスライダーを簡単に更新する

【WordPress】シンプルなオリジナルテーマの作り方(9)~404ページ~

WordPress

【WordPress】シンプルなオリジナルテーマの作り方(9)~404ページ~

アルビレックス新潟、踏み止まる

THOUGHT

アルビレックス新潟、踏み止まる

Bootstrap4でデバイス別に表示・非表示を切り替えるclass

WEB

Bootstrap4でデバイス別に表示・非表示を切り替えるclass

浦和レッズの森脇問題について思う事

THOUGHT

浦和レッズの森脇問題について思う事