CSSの表現力は無限大！クリエイティブでユニークなCSSアニメーション30+1選
アニメーション自体は、 @keyframes ルールで定義したキーフレームによって作られます。キーフレームは、アニメーションの開始状態( from )と終了状態( to )を定義します。ここでは、 my-animation キーフレームが div 要素の background-color 、 width 、 top の3つのスタイルプロパティを変化させています。これらのプロパティが同時にアニメーション化されることで、一貫性のあるアニメーションが生み出されます。
CSS キーフレームアニメーションの事例
1. シンプルなローディングスピナー
2. シンプルなCSSローダー
3. 回転する形状の変化
4. スクロールテキストアニメーション
5. アニメーションつきSubmitボタン
6. ホットコーヒー
7. コーヒーマシン
8. ボタンのウィグル
9. パックマン
10. 3つのドットのローディング
11. 終わりのないボックス
12. カラーファン
13. 砂糖キューブの上のアリ
14. 3Dトグルスイッチ
15. 潜水艦
16. ホバー時のアニメーションタイトルテキスト
Olivia NgのHover Effect for Headersこの例では、タイトルテキストにダイナミズムを加えるさまざまな方法を探っています。わずか2つのキーフレームでも、見出しを引き立たせることができるのがわかります。
17. 最小限のネコ
18. 伸縮バー
CSS アニメーションは、データビジュアライゼーションにアクセントを付けるのに役立ちます。この例では、色の変化と速度の変化によって、動的なバーグラフに異なる雰囲気を生み出しています。CSS アニメーションを使えば、アニメーションの速度や繰り返し回数を自由に変更できます。
19. ねじれ四角形
20. レーザータグ
21. ろうそく
22. 走るトラック
Chris Johnsonの "Speedy Truck"は、パララックスを巧みに使ってトラックが自然の風景を走り抜けるように表現しています。外見はシンプルですが、変形プロパティの創造的な使い方によって、道の凹凸まで表現されています。
23. スノーグローブ
その他のCSS アニメーションの例
24. 浮遊するイメージ
25. CSSマウスホバーのトランジション効果
26. ホバーレスポンシブロゴ
27. 回転テキスト
28. 開くエンベロープ
29. 書類ケース
30. 宇宙飛行士
最後に
Tailwind CSS Animations: Tutorial and 40+ Examples 記事は上… Added to my CSS reset: interpolate-size, the quality-of-lif… 25+ CSS Blob Effects 記事は上記記事を意訳したものです。 ※当… 20 CSS Blur Effects 記事は上記記事を意訳したものです。 ※当… 10+ Hamburger Menu Examples [CSS Only] 記事は上記記事を意訳… 最終更新: 2025-04-25 10:30Webクリエイターのコハムです。 地味な事務職からWeb制作会社に転職してフリーランスになりました。 キンクマハムスターと2人暮らし。