広島県内1位に輝いたゆるキャラとは!?ライフスタイル汚れ、ダメ、ゼッタイ。大事なポーチを汚さず使うためにこうしてみた。雑学ブラックフライデー?お知らせアンディワークスは、10周年を迎えました!オプションを表示2015.01.27お仕事CSSアニメーションの覚え書きCSS3ツイートフロントエンドエンジニアの井上です。弊社社長と同姓なのは偶然です。弊社サイトをリニューアルしました。その際メンバーページでCSSアニメーションを使いました。マウスオーバー時に画像の切り替えはjQueryで制御しているのですが、それだけだと味気ないのでCSSで回転アニメーションを加えています。今回は簡単なCSSアニメーションについて書いていきます。メンバーページで使った回転以外にもいくつかご紹介します。CSS3アニメーションCSS3登場以前はJavaScriptやFlash、gif画像で実装されていたアニメーションですが、簡単なアニメーションであればのCSS3に追加されたプロパティで実装できます。CSS3なのでモダンブラウザでなければ動きませんがFlashを使わないので、iPhoneやiPadなどでも動きます。iPhoneやiPadでの動作であれば、JavaScriptでも可能ですが、CSSアニメーションの方が動作が軽いので、モダンブラウザのみサポートの場合は積極的に採用したいですね。詳しい対応状況などは以下のサイトから確認できます。(transition)画像を30度回転させます。linear;でアニメーションの初期値を決めます。この例では、すべてを0.5秒かけてアニメーションさせるように指定しました。0.5秒の0は省略可能です。linearはアニメーションを一定のスピードで実行します。その他にもease-in(ゆっくり開始)ease-out(ゆっくり終了)ease-in-out(ゆっくり開始しゆっくり終了)などがあります。transformでどんなアニメーションにするかを指定しています。ここでは回転なので、rotateを指定します。次に回転する角度ですが、単位はdegです。30degで30度回転させます。画像をズームさせます。400px;}transitionをつかい1秒かけて、widthとheightを変化させます。通常時よりマウスオーバー時の方を小さくすると縮小ができます。300px;}スライド画像を左にスライドするアニメーションを指定します。ease;transitionで今までは設定されたCSSすべてをアニメーションしていましたが、今回はmarginのみをアニメーションさせます。マウスオーバー時に左側にネガティブマージンを与えることによって、左に動かします。逆に右側にネガティブマージンを与えると右に動きます。マウスオーバーしたらカラーに(※IE未実装)filterを使いあらかじめ白黒にしていた画像をカラーにアニメーションさせる。filterですがこちらもCSS3から追加されたプロパティです。今回はgrayscaleを指定して白黒にしています。0%(カラー)から100%(白黒)の間で変化します。grayscale(0%);}まとめいかがでしたか。今までFlashやJavaScriptでやっていたことが、数行で実装できるようになりました。ほかにも_color_や_background-color_など色もアニメーションで変化させられるので、できることはたくさんあります。モダンブラウザサポートの場合は、CSS3を使った負荷の少ないアニメーションを実装できたらと思います。本日テスト販売開始!お仕事2019.07.03インバウンド受入ビジネスフェアお仕事2019.06.21気になってしまうんです。082-568-6673。