CSSアニメーション図鑑

読み込み中であることを示す、最も使われる動きのカテゴリ。視線を留めながら退屈させない、12種類のサンプル集。

触ってみたくなるUI。マウスを乗せて反応する、10種類のインタラクション例。

見出しや一文を引き立てる文字の動き。10種類のスタイルで文章に表情を。

ヒーローセクションや空白を彩るリビングなバックグラウンド。8種類のフルカバー表現。

純粋な形が動くと、抽象的でも目を奪う。clip-pathとborder-radiusで作る8つのフォルム。

perspectiveとtransform-style: preserve-3dで奥行きを生む、空間的なアニメーション集。

壊れたディスプレイを思わせる、ノイジーで攻撃的なエフェクト群。

物理を感じる弾性的な動き。cubic-bezierで作るスナッピーな表現8種。

要素が登場する時の演出。スクロールトリガで使うことが多い動きをループでデモ。

雪、雨、紙吹雪、ホタル...雰囲気を作るパーティクル系の6種。

進捗・読み込み・ステップ表示。仕事の状態を伝える5種のインジケーター。

炎、水、葉、雲、太陽など、自然の元素をCSSのみで再現する6種。

時計、振り子、呼吸など、規則的な動きが心を落ち着ける5種。

光は最も強力なフィードバック。ネオン、稲妻、キャンドルなど、光の動き5種。

トグル、チェック、ベル、検索...小さな動きがUIを生かす。6種類のマイクロインタラクション。

CSSアニメーションを実装で活かすための、いくつかの実用的ガイドライン。