CSSアニメーションの覚え書き
フロントエンドエンジニアの井上です。弊社社長と同姓なのは偶然です。
弊社サイトをリニューアルしました。
その際メンバーページで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秒かけて、widthとheightを変化させます。
通常時よりマウスオーバー時の方を小さくすると縮小ができます。
.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を使った負荷の少ないアニメーションを実装できたらと思います。