”シンプル”なデザインを、”フツー”の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.