CSSアニメーションを使って、見る人を楽しませよう！

こんにちはmiyaです。
研修7日目！
残すところあと3日です。
ほんとにあっと言う間です！

Webサイトでアニメーションをさせる2つの方法

昔、Webサイトでアニメーションを使うと言えばGIFアニメーションやFlashアニメーションなどが主流でした。
でもGIFは使える色数が256色！
アルファチャンネルが使えないのでキレイな透明化ができずに縁がガタガタになったりして見た目が美しく無かったりするデメリットがありました。

じゃあ、Flashアニメーションはというと、SWFというファイルを書きだせるソフトがなければ作れませんでした。
主にAdobe Flashというソフトになります。
(今はAdobe Animationという名称に変わっています。)
それと大きな問題としてFlashファイルを表示させるプラグインをブラウザにインストールしなければ見れなかったんです！
それに脆弱性もあるのでiPhoneが導入を見送ったので今ではあまりFlashアニメーションは以前ほど見かけなくなっています。

JavaScriptで動かせる！

GIFアニメが見た目が美しくない、Flashも使えない、ならどうやってアニメーションをすればいいんでしょう？
答えの一つはJavaScriptを使ってアニメーションさせる！

昔は良くあったのですが、マウスカーソルのついてくるイラストとか、縦横のラインとか、雪を降らしたりなど様々なアニメーションができます。
マウスを乗せるとは画像が切り替わるロールオーバーも昔はJavaScriptでやってたんですよ！

今でもjQueryを使って簡単に実装できるものがありますので探してみて下さいね！

もっと手軽にワンポイントアニメーションはCSSで可能！

そう、昔はアニメーションはJavaScriptのお仕事！
CSSで出来るのはロールオーバーぐらいでした。

See the Pen CSS Rollover Sample by futappa201702intern (@ftit201702) on CodePen.0

手法としては通常時とロールオーバー時の画像を一つの画像にしておき背景画像として指定します。
そして、:hover時に背景画像の表示位置を変える、という手法です。
JavaScriptで実装するより簡単なので私は昔、よく使ってました！

でもCSS3になってからCSSだけでできるアニメーションがかなり増えました！
もうできない事がないんじゃないか、というぐらいです(大げさですが/汗)

See the Pen img hover animation sample01 by futappa201702intern (@ftit201702) on CodePen.0

マウスオーバーで画像がスムーズに大きくなりましたよね！
こういうことがCSSだけで可能になり、見ている人も楽しめる工夫が出来るようになりました！

See the Pen img hover animation sample02 by futappa201702intern (@ftit201702) on CodePen.0

こんなこともよく見かけますよね！

---

今回のサンプルでは比較的簡単なものを掲載しましたが、もっと複雑なアニメーションだって可能！
いろいろ試してみてどこに使えるかを考えるとさらにスキルアップにつながりますね！