ここ数年のWebサイト制作におけるフロントエンド技術の進化はめざましく、レイアウトも多様化しました。さらに、CSS3が公開されてからは、CSSだけで実装できる表現がの幅広がりました。従来はJavaScriptを使用しなければできなかったアニメーションなどもそのひとつです。 今回は、そんなCSSアニメーションを実装するのに便利な、厳選素材&サンプルを15個ご紹介します! CSSアニメの基本構造 CSSアニメーションは、JavaScriptで実装されたアニメーションよりスムーズで、JavaScriptが作動しない環境下でも使用することができます。シンプルなアニメーションであれば、パフォーマンスの観点からもCSSのアニメーションの方が良いでしょう。 実装方法も簡単です。アニメーションの動きや変化を記述したクラスを用意し、keyframesで開始点、中間点、終了点を指定します。アニメーションはユー
![CSSアニメーション15選!Webデザイナーのこだわりを実装できる厳選コード&サンプル | Workship MAGAZINE(ワークシップマガジン)](https://cdn-ak-scissors.b.st-hatena.com/image/square/d39af2e930d92e4f22ce791dbede3737b0086205/height=288;version=1;width=512/https%3A%2F%2Fi2.wp.com%2Fgoworkship.com%2Fmagazine%2Fapp%2Fuploads%2F2018%2F04%2FSplit-Screen-Image-Gallery-e1523786709795.png)