CSSアニメーション15選！Webデザイナーのこだわりを実装できる厳選コード＆サンプル

ここ数年のWebサイト制作におけるフロントエンド技術の進化はめざましく、レイアウトも多様化しました。さらに、CSS3が公開されてからは、CSSだけで実装できる表現がの幅広がりました。従来はJavaScriptを使用しなければできなかったアニメーションなどもそのひとつです。

今回は、そんなCSSアニメーションを実装するのに便利な、厳選素材＆サンプルを15個ご紹介します！

CSSアニメの基本構造

CSSアニメーションは、JavaScriptで実装されたアニメーションよりスムーズで、JavaScriptが作動しない環境下でも使用することができます。シンプルなアニメーションであれば、パフォーマンスの観点からもCSSのアニメーションの方が良いでしょう。

実装方法も簡単です。アニメーションの動きや変化を記述したクラスを用意し、keyframesで開始点、中間点、終了点を指定します。アニメーションはユーザーの印象を変える手段として有効に働きます。

実際にCSSで、どのようなアニメーションが作れるのかいくつかの例をご紹介します。

実装に役立つ最新のCSSアニメーション15選

ブラウザの対応が進み、使用できるプロパティが増えたことで表現が広がりさまざまなデザインを表現することが可能になりました。実際のデモをCodePenで確認して、GitHub上でコードをダウンロードできるように、アニメーションをまとめてみました。

1. 3D Direction Aware Image Slider

立体的な3Dスライダーで、カーソルの位置に応じたインタラクションを提供しています。全面のイメージと背面のイメージが同時に切り替わります。Pug、CSS（SCSSも利用可能）、Babelを使用してこだわって作られています。

GitHub / Alex Nozdriukhin / CodePen

2. Pure CSS Gradient Colour Slide Puzzle Style Loading Animation

四角を1マス取り除いたパズルのようなデザインが特徴的で、塗りの色はグラデーションで変化するローディングアニメーションです。HTMLとLESSで作られています。

GitHub / Andreas Hjortland / CodePen

3. Mesmerizing Parallax Animated Info Card

ネイサン・テイラーのデザインにこだわりを感じるブログカードです。非常にリッチなアニメーションの遷移が魅力的で、ブログのアーカイブ記事の表示に適しています。Pug、SCSS、Babelで作られています。

GitHub / Nathan Taylor / CodePen

4. Sliding Diagonals Background Color Effect

対角線上に広がる調和が取れた寒色の背景が特徴的でクールな背景アニメーションです。HTMLとCSSだけで作られています。

GitHub / Chris Smith / CodePen

5. Newton’s Cradle Loading Animation

ニュートンのゆりかごを思い出させる可愛らしいCSSのアニメーションです。HTMLとCSSだけで作られています。

GitHub / Steven Traversi / CodePen

6. Glowing Social Icon Hover Animation

マウスホバーによって、SNSのシェアボタンが各サービス毎のネオンカラーに光ります。HTMLとCSSだけで作られています。

GitHub / Rajeshdn / CodePen

7. 2 Column Split Screen Image Gallery With Description Box

画像とキャプションのスプリットスクリーンです。スクロールで左右に新しいコンテンツが読み込まれていきます。最新の記事を表示するのにも適しています。HTMLとCSS、JavaScriptで作られています。

GitHub / EduardoBouças / CodePen

8. Pure CSS Text Revealing Animation

数パターンの動きでテキストの非表示と表示を切り替えるアニメーションです。HTMLとCSSだけで作られています。

GitHub / Nooray Yemon / CodePen

9. Email Subscribe Form and Button In One

CSSを使用して、フォームのバリデートを行っています。値が有効な場合のみ送信ボタンを表示させます。HTMLとCSS、JavaScriptで作られています。

GitHub / Ahmad Shadeed / CodePen

10. Colour Changing Grid Hover Animation

グリッド表示されたセクションをマウスホバー箇所だけ表示色を変えるCSSアニメーションです。波紋のように広がるアニメーションが特徴的です。HTML、PostCSS、Babelで作られています。Web Animations APIを使用して実装されています。

GitHub / Gennadi Debbaut / CodePen

11. Input Highlight as seen on Tripadvisor

Tripadvisorの検索のようなCSSで、入力すると線画がハイライトされます。文字数に寄って、ハイライト位置も移動します。HTML、SCSS、Babelで作られています。

GitHub / Petr Gazarov / CodePen

12. Rotating Square Background Animation

回転する四角が表示されながら消えていく背景のアニメーションです。HTML要素をCSSで背景として処理しています。PugとSCSSで作られています。
GitHub / Bjorn Rombaut / CodePen

13. The Intern Trailer Text Animation

マイ・インターンのオフィシャルPR動画で使用されたと同様のアニメーションです。
黒の背景からはじまり、白背景の割合を変えていく気持ちの良いアニメーションが特徴的です。HTML、CSS、JavaScriptで作られています。

GitHub / Balint Polgarfi / CodePen

14. Login and Signup Switch Card UI

ログイン、サインアップカードを切り替えるアニメーションです。背後にあるぼかしの入ったカードをクリックすると反転しながら切り替わります。HTML、CSS、JavaScriptで作られています。
GitHub / Omkar Kulkarni / CodePen

15. Pure CSS Netflix Style Text Animation

Netflixのイントロのようなテキストアニメーションです。長い影が短く変化して、フォントカラーが変わり平面的にアニメーションしていきます。SlimとSCSSで作られています。
GitHub / Nooray Yemon / CodePen

まとめ

いかがでしょうか？ 参考なりましたでしょうか？
どれもGitHubからダウンロードすることができるので、気になったアニメーションは取り入れてみてください。

（翻訳：Yuri Tanaka）