CSS

CSS3のアニメーション（animationプロパティ）を使って画像をドクンドクンさせるデモ

 

CSS3のanimationプロパティを使って、コンバージョン率を挙げるように強調してみます。

CSS3のアニメーション（animationプロパティ）を使って脈打つボタンをつくった！

まずはベースとなるHTMLとCSSでボタンを作成します！

 HTML

              	→                **

 CSS

a.button_area {  	margin: 0 auto;  	display: block;  	position: relative;  	}  img.button_top , img.button_base {	  		transition: all .3s ease-in-out 0s;  	-webkit-transition: all .3s ease-in-out 0s;  	-moz-transition: all .3s ease-in-out 0s;  	-o-transition: all .3s ease-in-out 0s;  	}    a.button_area img.button_top {  	position: absolute;  	top: 30px;  	left: 45px;  	z-index: 311;  }    a.button_area:hover > img.button_base,    a.button_area:focus > img.button_base{  	margin-left: 40px;  	animation: none;  	-webkit-animation: none;  opacity: 0.85; filter: alpha(opacity=85%);  }

animationで動かす矢印のアイコンとボタンは別々で配置し、両方を包む親要素にposition:relativeと
子要素にposition:absolute;を指定します。

absoluteになっている矢印のアイコンをこの後animationで動かそうと思います。

ボタンのデモ

HTMLのコツは、リンクで「可動部の画像」と「ボタンの本体の画像」を内包することですね
そうすることでクリックできる領域の確保をしています。

あと、可動部(サンプルでドキドキしている方)は必ずPNGで制作すること。透過が必要ないのであればそこは結構ですが
やはりきれいな図が好ましいです。

CSS3のアニメーション系プロパティ@Keyframesとは？

続いてCSSアニメーションを追加していきます！今回は@keyframeを使います。

主にオブジェクトを動的に拡大、移動など、変化させるプロパティです
立派なCSS3なのでモチロンIE9とかまでは対応していません。

基本的に数値で指定できるCSSプロパティはアニメーションさせることができます。

便利なものとしては、CSS3プロパティであるtransformが挙げられます。

種類は

といった感じでその中からscaleを使用します。

 CSS

@keyframes heartbeat {    0%   { transform: scale(1, 1); }    5%  { transform: scale(1.5, 1.5); }    6%  { transform: scale(1.2, 1.2); }    10%  { transform: scale(1.3, 1.3); }    100% { transform: scale(1, 1); }  }  @-webkit-keyframes heartbeat { /* Safari & Chrome */    0%   { -webkit-transform: scale(1, 1); }    5%  { -webkit-transform: scale(1.5, 1.5); }    6%  { -webkit-transform: scale(1.2, 1.2); }    10%  { -webkit-transform: scale(1.4, 1.4); }    100% { -webkit-transform: scale(1, 1); }  }

@keyframes – CSS | MDN

上記アニメーションを書き足して、こんな感じ。

CSS

	a.button_area {  	margin: 0 auto;  	display: block;  	position: relative;  	}  img.button_top , img.button_base {	  	transition: all .3s ease-in-out 0s;  	-webkit-transition: all .3s ease-in-out 0s;  	-moz-transition: all .3s ease-in-out 0s;  	-o-transition: all .3s ease-in-out 0s;  	}    a.button_area img.button_top {  	position: absolute;  	top: 30px;  	left: 45px;  	z-index: 311;  	/*Button animation setting*/    animation: heartbeat 1.4s;    animation-iteration-count: infinite;    -webkit-animation: heartbeat 1.4s; /* Safari & Chrome */    -webkit-animation-iteration-count: infinite;  }    a.button_area:hover > img.button_top ,   a.button_area:focus > img.button_top{  	margin-left: 40px;  	animation: none;  	-webkit-animation: none;  	}    @keyframes heartbeat {    0%   { transform: scale(1, 1); }    5%  { transform: scale(1.5, 1.5); }    6%  { transform: scale(1.2, 1.2); }    10%  { transform: scale(1.3, 1.3); }    100% { transform: scale(1, 1); }  }  @-webkit-keyframes heartbeat { /* Safari & Chrome */    0%   { -webkit-transform: scale(1, 1); }    5%  { -webkit-transform: scale(1.5, 1.5); }    6%  { -webkit-transform: scale(1.2, 1.2); }    10%  { -webkit-transform: scale(1.4, 1.4); }    100% { -webkit-transform: scale(1, 1); }  }    a.button_area:hover > img.button_base,    a.button_area:focus > img.button_base{  	opacity: 0.85; filter: alpha(opacity=85%);  	}

では、アニメーションを当てていきます！

animation:プロパティでHTML要素を動かそう！

 

アニメーションさせたい要素に、animationプロパティを指定し、値を書き込みます！
CSS アニメーション – Web developer guide | MDN

animation: heartbeat 1.4sの意味合いは、「heartbeat(自分で付けたアニメーション名)」「[1.4s(変化の1サイクルに必要な時間)」です。

後のanimation-iteration-count: infinite; これは変化を無限に継続するという指定です。数字で回数を指定することもできます。

CSS アニメーション – Web developer guide | MDNに書いてあるとおり、animation関連のプロパティは細かく役目がわかれています。

  • animation-name…アニメーション名
  • animation-delay…アニメーション発動までのタイムラグ
  • animation-duration…アニメーションの時間
  • animation-iteration-count…アニメーションの回数 infinite（無限）/数字
  • animation-direction…animation- iteration-countが1でないとき、繰り返しの仕方。折り返すか、そうでないか normal（通常）/reverse（逆にアニメーション）/alternate（通常→折り返すの繰り返し）/alternate- reverse（逆にアニメーション→通常方向で折り返し）
  • animation-play-state…アニメーションを実行するか一時停止するか running（実行中）/paused（一時停止）
  • animation-fill-mode… アニメーション終了後、アニメーション前の状態に戻るかそうでないか none（keyframes中のCSSはアニメーション終了後に適用しない）/ fowards（to{}もしくは100%{}で指定したCSSの状態で終了）/ backwards（from{}もしくは0%{}で指定したCSSの状態で終了）
  • animation-timing-function…対象オブジェクトの変化の仕方 ease/ease-in/ease-out/ease-in-out/linear/cubic-besizer/step-start/step-stop/steps(回数 , end)

と、この様に、多くのトリッキーな演出が可能です。

最後のanimation-timing-functionに関しては各命令の効果が文章で説明しにくいのです。

step～系は、アニメーションを分割するんだと思います。
一番最後のsteps(回数,end)は、「回数」のところに入力した数値分、等間隔にアニメーションを分割して再生します。ほんとに使いどころがわからん。

今回は、これらをぐっと省略しているということです。

アニメーションの内容は@keyframes ～{}で指定します

@keyframesに続けて半角スペースを入れ、アニメーション名を指定します。
続けて、{}内に効果のタイミングと効果を指定します。

0%(from)から始まり100%(to)で終わり。このルールの中で、前述のように数値で指定できるCSSプロパティの変化前から変化後の値を記述します。

これが、animationプロパティで指定した1.4s（=1.4秒間）の中で行われ、繰り返されます。

CSSアニメーション系のデザインは、動かなくても不自然ではない構成を前提としてデザインする必要があることに注意してください！

 

で、マウスオーバー時の処理も記述します。このまま動き続けていても鬱陶しいので

a.button_area:hover > img.button_top ,   a.button_area:focus > img.button_top{  	margin-left: 40px;  	animation: none;  	-webkit-animation: none;  	}

この部分のanimtion:none;でアニメーションを止めています。

 

以上を踏まえたのがコチラです。

ちなみに、animation-timing-functionでよく解らない「step-start」「step-stop」を指定したのがこちらです。

以上、とても深いプロパティ、animationの僕流の使い方でした！

ぜひ、この機会に少しでも知っていただけたら幸いです…

 

でわ！

 

コーディング
RELATED POST