ブログ

> ブログ > お仕事 > CSSアニメーションの覚え書き
お仕事

CSSアニメーションの覚え書き

IMG_7439

フロントエンドエンジニアの井上です。弊社社長と同姓なのは偶然です。

弊社サイトをリニューアルしました。
その際メンバーページでCSSアニメーションを使いました。
マウスオーバー時に画像の切り替えはjQueryで制御しているのですが、それだけだと味気ないのでCSSで回転アニメーションを加えています。

今回は簡単なCSSアニメーションについて書いていきます。
メンバーページで使った回転以外にもいくつかご紹介します。

CSS3アニメーション

CSS3登場以前はJavaScriptやFlash、gif画像で実装されていたアニメーションですが、簡単なアニメーションであればのCSS3に追加されたプロパティで実装できます。
当然、CSS3なのでモダンブラウザでなければ動きませんがFlashを使わないので、iPhoneやiPadなどでも動きます。
iPhoneやiPadでの動作であれば、JavaScriptでも可能ですが、CSSアニメーションの方が動作が軽いので、モダンブラウザのみサポートの場合は積極的に採用したいですね。

詳しい対応状況などは以下のサイトから確認できます。

findemebyIP(http://fmbip.com/litmus/)

回転 (transition)

画像を30度回転させます。

 

.img1{
	-webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	-o-transition: all .5s linear;
	-ms-transition: all .5s linear;
	transition: all .5s linear;
}

.img1:hover{
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	transform: rotate(30deg);
}
	transition: all .5s linear;

でアニメーションの初期値を決めます。
この例では、すべてを0.5秒かけてアニメーションさせるように指定しました。
0.5秒の0は省略可能です。

linearはアニメーションを一定のスピードで実行します。

その他にも

  • ease-in(ゆっくり開始)
  • ease-out(ゆっくり終了)
  • ease-in-out(ゆっくり開始しゆっくり終了)

などがあります。

transformでどんなアニメーションにするかを指定しています。
ここでは回転なので、rotateを指定します。

次に回転する角度ですが、単位はdegです。
30degで30度回転させます。

拡大

画像をズームさせます。

 

.img2 img{
	height: 300px;
	width: 300px;

	-webkit-transition: all 1s linear;
	 -moz-transition: all 1s linear;
	 -o-transition: all 1s linear;
	-ms-transition: all 1s linear;
	transition: all 1s linear;
}

.img2 img:hover{
	width: 400px;
	height: 400px;
}

transitionをつかい1秒かけて、widthheightを変化させます。

通常時よりマウスオーバー時の方を小さくすると縮小ができます。

 

.img2 img{
	height: 400px;
	width: 400px;

	~省略~

}

.img2 img:hover{
	width: 300px;
	height: 300px;
}

スライド

画像を左にスライドするアニメーションを指定します。

 

.img3 img{
	margin-left: 0px;
	-webkit-transition: margin 1s ease;
	 -moz-transition: margin 1s ease;
	 -o-transition: margin 1s ease;
	-ms-transition: margin 1s ease;
	transition: margin 1s ease;
}

.img3 img:hover{
	margin-left: -200px;
}

 

transition: margin 1s ease;

transitionで今までは設定されたCSSすべてをアニメーションしていましたが、今回はmarginのみをアニメーションさせます。

マウスオーバー時に左側にネガティブマージンを与えることによって、左に動かします。
逆に右側にネガティブマージンを与えると右に動きます。

マウスオーバーしたらカラーに

(※IE未実装)

filterを使いあらかじめ白黒にしていた画像をカラーにアニメーションさせる。

まずfilterですがこちらもCSS3から追加されたプロパティです。
今回はgrayscaleを指定して白黒にしています。
0%(カラー)から100%(白黒)の間で変化します。

 

.img4 img{
	-webkit-filter: grayscale(100%);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}

.img4 img:hover{
	-webkit-filter: grayscale(0%);
}

まとめ

いかがでしたか。今までFlashやJavaScriptでやっていたことが、数行で実装できるようになりました。
ほかにも_color__background-color_など色もアニメーションで変化させられるので、できることはたくさんあります。
モダンブラウザサポートの場合は、CSS3を使った負荷の少ないアニメーションを実装できたらと思います。