CSSの表現力は無限大！クリエイティブでユニークなCSSアニメーション30+1選

30 Creative and Unique CSS Animation Examples to Inspire Your Own

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

---

CSS アニメーションを使えば、ボタンをよりクリックしやすくしたり、ランディングページにアクセントを付けたり、ページの読み込み中にユーザーを楽しませたりと、ウェブサイトでビューアーを魅了するのに効果的な方法です。

この投稿では、CSS アニメーションを成功裡に使った30の例をご紹介します。ウェブサイトの分析に多くの時間を費やしているユーザーとして、優れたアニメーションをよく見分けることができ、それらを皆さんに共有できることを嬉しく思います。

ではまず、CSS アニメーションの基本を復習しましょう。

CSS アニメーションの仕組み

CSS アニメーションは、要素のスタイルプロパティの変化をアニメーション化する CSS の機能です。純粋な CSS アニメーションには、追加のコード(JavaScriptなど)やメディア(GIFなど)は必要ありません - すべて HTML と CSS で行えます。

簡単な CSS アニメーションを作るには、3つのものが必要です: アニメーション対象の HTML 要素、その要素にアニメーションを適用する CSS ルール、そして開始時と終了時のスタイルを定義するキーフレーム。さらにアニメーションの速度やディレイなどをカスタマイズするための宣言を追加することもできます。

例として、以下に簡単な CSS アニメーションのサンプルを示します:

ここでは、div 要素がアニメーション対象です。CSS では、animation-name によってキーフレーム my-animation がこの div 要素にバインドされています。その下に、アニメーションのタイミングやふるまいを制御する追加の宣言があります。

アニメーション自体は、@keyframes ルールで定義したキーフレームによって作られます。キーフレームは、アニメーションの開始状態(from{})と終了状態(to{})を定義します。ここでは、my-animation キーフレームが div 要素の background-color、width、top の3つのスタイルプロパティを変化させています。これらのプロパティが同時にアニメーション化されることで、一貫性のあるアニメーションが生み出されます。

この例では1つのキーフレームしか使っていませんが、複数の種類のアニメーションがある場合は、それぞれ別のキーフレームを定義することができます。

CSS キーフレームアニメーションの事例

以下では、基本的な相互作用効果から芸術的な作品(少なくとも私の感じ方では)まで、さまざまなCSS アニメーションの事例を紹介します。これらの事例は、コードペン(HTML/CSSのコードスニペットを作成・共有できるウェブサイト)から集めたものです。創造性を刺激したい場合は、コードペンはきっと良いヒントを与えてくれるはずです。

まずは、上で説明したような伝統的なキーフレームアプローチを使った事例から見ていきましょう。これらの事例は一般的に、自分のプロジェクトに応用しやすい例です。

1. シンプルなローディングスピナー

CSS アニメーションを使えば、みなさんおなじみのような効果を作ることができます。この回転するロードアイコンがその一例です。この意味合いはほぼ全世界的に理解されており、コードも軽量です。この特定の例では、スケーラブルなベクターグラフィックを使って同様の効果を実現する方法も示されています。

2. シンプルなCSSローダー

ここでは、スムーズで洗練された複数のローディングアニメーションを紹介します。あなたのお気に入りのものを選んでみてください。

3. 回転する形状の変化

実践のために解析すると良い例です。各トランジションがアニメーションのキーフレームの中で異なるタイミングで適用されていることに注目してください。

4. スクロールテキストアニメーション

テキストを魅力的に見せるもう1つのクールな方法として、スロットマシーンのような効果でテキストを画面に表示したり隠したりするアニメーションがあります。効率的、ユーザーフレンドリー、持続可能など、ウェブサイトで製品の多様性を伝えたい場合にはこのようなアニメーションが役立ちます。

5. アニメーションつきSubmitボタン

洗練されたデザイナーがウェブページ全体に仕込んでいる、小さな予期せぬ喜びの瞬間が好きです。このSubmitボタンは、フォームの送信などのアクションが完了したことを視覚的にフィードバックする、きれいで心地よい方法です。

6. ホットコーヒー

シンプルで洗練されたアニメーションでも、大きな効果を生み出せます。この例では、平行移動、拡大縮小、不透明度のフェードアウトをCSS アニメーションで適用することで、基本的なイラストに生気を与えています。

7. コーヒーマシン

HubSpotブログではコーヒーが大好きなので、もう1つコーヒー関連のサンプルを紹介します。この場合、アニメーションが注目を引くことはありません。むしろ、周りの設計を強化することで、要素全体がより没入感のあるものになっています。ユーザーが気付くかもしれませんし、気付かないかもしれませんが、確実に評価されるものです。

8. ボタンのウィグル

ユーザーをコールアクションに導く必要がありますか? カラーフラッシュやモーダルの代わりに、このようなユーモアあふれるウィグル効果をボタンに追加するのも良いでしょう。この効果は注意を引くことができますが、侵略的ではなく、ユーザーのフローを大きく乱すこともありません。むしろ、遊び心のあるフレンドリーな印象を与えています。

9. パックマン

著作権の問題があるため、このデモをウェブサイトに置くことは推奨しませんが、見ていて楽しいです。

10. 3つのドットのローディング

これもCSS アニメーションを使ったローディング効果の例です。スケールの変化だけで、"しばらくお待ちください"というメッセージを伝えることができます。

11. 終わりのないボックス

シーシュポスを想起させるこのアニメーションでは、ボックスが斜面を絶え間なく登っては落ちていきます。ローディングアニメーションとして使えそうですね。ボックスが斜面の向こう側に倒れ込むところで終わるとサティスファクションがあるかもしれません。

12. カラーファン

この次の例は、デザイン重視のビジネスウェブサイトに特に適しています。カラーパレットをアニメーション化して扇状に広がる効果を演出し、単純な色付き四角とは違うものを作りましょう。

13. 砂糖キューブの上のアリ

もしあなたが虫が苦手なら、このサンプルは見逸してもらって構いません。左、底部、変形プロパティでアニメーションを巧みに実装した、面白い例です。キーフレームはすべて、各"アリ"SVG要素の位置を変更しているだけです。

14. 3Dトグルスイッチ

トグルスイッチはUIデザインの定番ですが、この例では3次元的な仕組みを導入し、切り替え時のスムーズなアニメーションも加わっています。ここでは開発者がCSSチェックボックス入力要素を、より面白いものに改変しています。

15. 潜水艦

CSSは平面的で色鮮やかなイラストやアニメーションに適しています。以下のコードでは、愛らしい潜水艦を描くために、いくつかの効果を組み合わせています。ただし私の提案としては、ビートルズのイメージにあわせてこれを黄色にするのはどうでしょうか。

16. ホバー時のアニメーションタイトルテキスト

Olivia NgのHover Effect for Headersこの例では、タイトルテキストにダイナミズムを加えるさまざまな方法を探っています。わずか2つのキーフレームでも、見出しを引き立たせることができるのがわかります。

17. 最小限のネコ

この例では、上手に活用されているネガティブスペースとタイミングよいCSS アニメーションの組み合わせが気に入っています。シンプルなデザインながら、CSSの変形プロパティだけでキャラクターを感じさせています。

18. 伸縮バー

CSS アニメーションは、データビジュアライゼーションにアクセントを付けるのに役立ちます。この例では、色の変化と速度の変化によって、動的なバーグラフに異なる雰囲気を生み出しています。CSS アニメーションを使えば、アニメーションの速度や繰り返し回数を自由に変更できます。

19. ねじれ四角形

この見た目シンプルな例は、錯覚を生み出す効果を生み出しています。ページ上のすべての四角形divに同じ回転効果が適用されていますが、サイズの違いによって回転速度が異なるため、不思議な錯覚が生まれます。

20. レーザータグ

このリストの中でも最も複雑な例の1つですが、短い間注意を引きつける魅力的なローディング表示になっています。

21. ろうそく

CSSアニメーションが物語を伝えられることを示す素晴らしい例です。これを実現するにはかなりの練習が必要ですが、初めてサイトを訪れた人の目を引くことでしょう。

22. 走るトラック

Chris Johnsonの "Speedy Truck"は、パララックスを巧みに使ってトラックが自然の風景を走り抜けるように表現しています。外見はシンプルですが、変形プロパティの創造的な使い方によって、道の凹凸まで表現されています。

23. スノーグローブ

見つけた中で最も居心地の良い例です。このスノーグローブのアニメーションは、静止画では得られない雰囲気をページに加えてくれます。雪が"ガラスの"グローブの内部でのみアニメーションされているのがわかります。

その他のCSS アニメーションの例

次のいくつかの例では、キーフレームを使わずに(あるいは最小限しか使わずに)、他のより複雑な技術を活用してアニメーション効果を実現しています。

24. 浮遊するイメージ

"浮遊"効果は、微妙で単純ながら効果的なアニメーションの使い方です。ここでは、アイコンを表示するのに使われていますが、素晴らしい結果が得られています。

25. CSSマウスホバーのトランジション効果

このアニメーションは、マウスオーバーによってトリガーされるシンプルながら効果的なテキストハイライト効果を示しています。ページ上のリンクにスタイルを加える良い方法だと思います。

26. ホバーレスポンシブロゴ

以下のペンの右下にあるロゴに注目してください - マウスホバーによってサブトルなアニメーションが適用されています。ナビゲーションをより楽しい体験にしてくれる、もう1つの視覚的なヒントです。

27. 回転テキスト

このサンプルはJavaScriptを使っているので、少し"不正"かもしれません。しかし、ホームページで使われていたらどうでしょうか。トランジションがとてもスムーズで、使用する効果をカスタマイズできるのが魅力です。

28. 開くエンベロープ

お気に入りの例の1つです。この優雅なアニメーションは細部にまでこだわっています。エンベロープが下に下がる動き、紙の細部、影まで、小さな工夫が積み重なって滑らかで一貫性のあるアニメーションを生み出しています。ボタンやスクロールアニメーションに最適でしょう。

29. 書類ケース

メニューを活気づけるには、このようなピュアなCSSの書類ケースのようなものを検討するのもいいでしょう。ホバーすると引き出しがわずかに開くので、主要なナビゲーションが他と際立って見えます。

30. 宇宙飛行士

こちらもフローティング効果と、フレンドリーな宇宙イラストの組み合わせが素晴らしい例です。ページ要素の雰囲気を高めるためのもう1つのサブタイルなCSS アニメーション効果です。

最後に

見てきたように、わずかなCSS アニメーションでも、ユーザーにとってより没入感のある体験を作り出すことができます。最高のアニメーションは、コンテンツやユーザー体験を妨げず、ギミック的にも見えないものです。上記の全てのサンプルはこのバランスを見事に保っています。

しかし、私たちは最後にこの"Watch Tower"の例を紹介せずにはいられません。この例は、おそらくこの記事の範疇を超えるほど複雑ですが、CSSとHTMLだけで実現できる力強さを物語っています。

このような素晴らしい小品をもっと見たい場合は、クリエイターのCodePen プロフィールをチェックし、自分のアイデアを練り始めましょう。