コラムColumn

CSS3アニメーションについて

6c0b09e2a4e2fe369efc17e98a8060d3

こんにちは。nananaです。

CSS3になって追加された機能のひとつにアニメーション関連のプロパティがあります。
これにより今までFlashアニメーションやJavaScriptを使わなければ表現できなかったものをCSSだけで表現できるようになりました。
しかもFlashアニメーションやJavaScriptに比べるとマシン負荷が軽く、パソコンに比べCPU性能が劣るスマートフォン等でもスムーズなアニメーションを表現することができます。
今回はそのCSS3アニメーションについて簡単にご紹介します。

アニメーションを実装するプロパティは二つあります。
transitionとanimationです。
簡単に訳すとtransitionは「変化」、animationは「動画」です。

単純にEのプロパティをaからbの状態に「変化」させたいならtransitionを使います。
transitionではEの「何」を「何秒」かけてどのような「速度」で「いつ」変化させるかを指定できます。
たとえばEの「背景色」を「3秒」かけて「一定の速度」でマウスオーバーした「0.5秒後」にa(赤)からb(青)の状態に変化させる、なんて具合に。
それぞれの指定例はこちら。
transition-property:background;//背景色を
transition-duration:3s;//3秒かけて
transition-timing-function: linear;//一定の速度で
transition-delay:.5s;//0.5秒後に

これを変化前のaの状態のスタイルシートに記述します

E{     /*変化前a*/
background:red;
transition:background 3s linear 0.5s;
/*こんな風に一行にまとめることもできます。*/
}
E:hover{     /*変化後b*/
background:blue;
}

ブラウザによってはまだベンダープレフィックス(接頭辞)が必要ですが今回は割愛
またプロパティはひとつだけでなく複数まとめて変化させることもできます。

次にanimationの設定の仕方です。
animationはプロパティごとに変化させるのではなく変化をまとめた記述に名前をつけそれを一度に動かすことができます。
指定方法は多少違いますが、上記transitionに加えて再生の「繰り返し回数」や「繰り返し方法」などの細かい設定をすることができます。
animation-name:bg;//アニメーション名
animation-duration:3s;//3秒かけて;
animation-timing-function:liner;//一定の速度で
animation-delay:0.5s;//0.5秒後に
animation-iteration-count:2;//2回繰り返す
animation-timing-function:normal;//一定方向に繰り返す

これを今度は変化後のスタイルシートに記述

E{     /*変化前a*/
background:red;
}
E:hover{     /*変化後b*/
background:blue;
animation:btn 3s liner 0.5s 2 nomal;
/*こちらも一行にまとめることもできます。*/
}

またanimationではキーフレームというものでどのタイミングで何を変化させるかを指定する必要があります。

@keyframes bg { /*先ほど指定したアニメーション名*/
 0% {background:red;}
 100% {background:blue;}
 }

こんなかんじ。

赤から緑にかわりさらに青に変わる、なんて風に細かく指定することもできます。


@keyframes bg {
 0% {background:red;}
 50% {background:green;}
 100% {background:blue;}
 }

パーセント指定の数値を変えれば変化するタイミングを変えることがもきます。
(こちらも実際はベンダープレフィックスが必要です。)

以上、transitonとanimationに要素を変形することができるtransformを組み合わせることで様々なアニメーションが表現できます

transformで設定できる主なものはこちら
移動:translate(X方向の移動距離, Y方向の移動距離)
縮尺:scale(X方向の縮尺比率, Y方向の縮尺比率)
回転:rotate(回転角度)
傾斜:skew(X軸の傾斜角度, Y軸の傾斜角度)

こんなかんじ

E {
background:red;
transition: all 1s linear 0.5s;
}
E:hover{
background:blue;
transform: translate(200px,0);
}

これでEをマウスオーバーすると背景色を赤から青に変えながらX方向(横)に200px移動ということができます。
記述自体はすごくシンプルです。
あとはどのタイミングで何をどう変えるか。そこが難しいし楽しいのです。

 

執筆者:nanana

お問い合わせフォーム