最近は制作に時間をずいぶん使っているので制作ネタばかりの投稿になってしまっていますがあまり気にせずブログ投稿をがんばって続けていこうかと思います。今日はCSSを利用した簡単なアニメーションの実装についてご説明したいと思います。いうものがありまして、今日はそちらを利用したアニメーションの実装について簡単にご説明出来ればと思います。Animate.css配布ページ以下のページで配布されています。Animate.csshttps://daneden.github.io/animate.css/インストールアニメーションを読み込むためにまずはAnimate.cssを利用できるようにする必要があります。配布されていますので導入してみてください。今回の私の環境の場合には、以下の手順で導入できました。動きと同じ内容で指示される場合が多いような気がしています。ウェブ業界でCSSアニメーションを実装する場合には、標準的に利用される状況になっているような印象がありますね。0にしておいて、画面に入ったタイミングでアニメーションを実行させることでアニメーションと同時に表示させることが可能です。クラスと同時に、アニメーションさせたい動きに対応したクラス名を付与する必要があります。それらにクラス名に当たります。約に立つので利用するといいと思います。jquery-inview)を利用したクラスを付与するためのコードだと以下のようなサンプルになります。上記によって、特定の要素が画面に入った場合に(opacity:0;なので見えないけど画面に入った場合に)アニメーションしながら表示されるといった動きを付けることが可能になります。一般的な動きが全部入りで使える便利なクラス群なのでぜひ利用してみてください。今日は参考事例として、制作をお手伝いさせていただいた鈴鹿市の若松にある「和洋菓子キクノヤ」さんの「香りをまとう焼菓子FLAVA(フレイヴァ)」のページを取り出してご説明させていただければと思います。取り出してご説明したいのは1stビューに設置した以下の画面のアニメーションです。利用したアニメーションを各要素順番に実行しています。かかった時間としてもそこまで時間をかけずに簡単にアニメーションを実装することができました。まとめ今日は簡単かつお手軽かつウェブ業界でCSSアニメーションの標準的な扱いになってると思われるAnimate.cssについて取り上げてみましたがいかがだったでしょうか?Animate.cssは毎回の制作において、そこまで予算がないんだけど少しでも動きを付けて楽しいページにしたい!という場合なんかに非常に重宝するライブラリなのでぜひ有効活用してみてはと思います。私自身も、今後も継続的に利用を続けていくと思います。CSSだけで動く軽量なTransitionアニメーションのライブラリとして非常に使い勝手が良いものなのですが、もう少し動きをパラメータで調整ができるライブラリがあればそちらも使ってみたいものですね。公式アカウント資料ダウンロード会社やサービスに関する資料ダウンロードをご希望の方は右の資料ダウンロードページからご利用ください。ご希望の方は応募フォームからご応募ください。