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を使った負荷の少ないアニメーションを実装できたらと思います。