投稿日：2019年2月11日
Animate.cssを利用したアニメーションの事例【和洋菓子キクノヤ】
最近は制作に時間をずいぶん使っているので制作ネタばかりの投稿になってしまっていますがあまり気にせずブログ投稿をがんばって続けていこうかと思います。
さて、今日はCSSを利用した簡単なアニメーションの実装についてご説明したいと思います。
基本的なアニメーションを実装するに当たってよく利用するライブラリとして Animate.css というものがありまして、今日はそちらを利用したアニメーションの実装について簡単にご説明出来ればと思います。
Animate.css
配布ページ
以下のページで配布されています。
Animate.css
https://daneden.github.io/animate.css/
インストール
アニメーションを読み込むためにまずはAnimate.cssを利用できるようにする必要があります。
npm でも配布されていますので導入してみてください。今回の私の環境の場合には、以下の手順で導入できました。
実装
ウェブのことがわかっているできるデザイナーさんと仕事をすると、アニメーションの指示まで漏れなくついてくるのですが、 その指示の内容が概ね Animate.css の動きと同じ内容で指示される場合が多いような気がしています。Animate.css はウェブ業界でCSSアニメーションを実装する場合には、標準的に利用される状況になっているような印象がありますね。
画面に入ったタイミングでアニメーションと同時に表示させたい場合なんかだと、透明度 (opacity) を0にしておいて、画面に入ったタイミングでアニメーションを実行させることでアニメーションと同時に表示させることが可能です。
アニメーションをさせるためには、animated クラスと同時に、アニメーションさせたい動きに対応したクラス名を付与する必要があります。例えば fadeIn や fadeInUp などがそれらにクラス名に当たります。
画面に入ってくるタイミングでアニメーションをさせたいってことだと jquery-inview が約に立つので利用するといいと思います。
https://www.npmjs.com/package/jquery-inview
上記（animate.css と jquery-inview）を利用したクラスを付与するためのコードだと以下のようなサンプルになります。
上記によって、特定の要素が画面に入った場合に（opacity:0;なので見えないけど画面に入った場合に）アニメーションしながら表示されるといった動きを付けることが可能になります。一般的な動きが全部入りで使える便利なクラス群なのでぜひ利用してみてください。
参考事例
今日は参考事例として、制作をお手伝いさせていただいた鈴鹿市の若松にある「和洋菓子キクノヤ」さんの「香りをまとう焼菓子FLAVA（フレイヴァ）」のページを取り出してご説明させていただければと思います。取り出してご説明したいのは1stビューに設置した以下の画面のアニメーションです。
和洋菓子キクノヤ 香りをまとう焼菓子FLAVA（フレイヴァ）
ちょっと昔ながらの実装になってしまっていますが、setTimeout で処理タイミングをずらしながら animate.css を利用したアニメーションを各要素順番に実行しています。かかった時間としてもそこまで時間をかけずに簡単にアニメーションを実装することができました。
まとめ
今日は簡単かつお手軽かつウェブ業界でCSSアニメーションの標準的な扱いになってると思われるAnimate.cssについて取り上げてみましたがいかがだったでしょうか？
Animate.cssは毎回の制作において、そこまで予算がないんだけど少しでも動きを付けて楽しいページにしたい！という場合なんかに非常に重宝するライブラリなのでぜひ有効活用してみてはと思います。
私自身も、今後も継続的に利用を続けていくと思います。CSSだけで動く軽量なTransitionアニメーションのライブラリとして非常に使い勝手が良いものなのですが、もう少し動きをパラメータで調整ができるライブラリがあればそちらも使ってみたいものですね。これがいいよ！ってライブラリをご紹介いただけるお優しい方いらっしゃいましたら是非ご連絡下さい( *’ω’*)ノ
