UI に使い回せる純 CSS モーション 100 本の動く見本帳。 各カードの「コピー」ボタンで HTML + CSS のスニペットをそのまま持ち出せます。
スクワッシュ&ストレッチと影の連動。ローディングや空状態の主役に
跳ねるたびに小さくなる自然な着地。ドロップイン通知の締めに
同じ動きを delay だけずらす基本形。「考え中…」のドット代わりに
潰れと伸びを誇張してゴム質感を出す。キャラクター性が欲しいときに
X軸とY軸を別々の alternate ループにして斜め反射を作る(DVDロゴ式)
しゃがみ→跳躍→空中で360°→着地。成功アクションの喜び表現に
同じ keyframes を delay・高さ・周期違いで重ねてランダム感を出す
短周期の低いバウンドとパドルの同期。テンポ感・操作中の手応え表現に
90°ずつ転がりながらホップして横断。プロセスが進む表現に
インパクトの瞬間にリングを走らせて重さを伝える。完了アクションに
同一キーフレームを delay の散らしだけで音楽的に見せる。再生中インジケーターに
位相ずらしでサインカーブの波を作る基本形。ローディングドットの定番に
順に倒れて順に起き上がる連鎖。ステップ処理が進んでいく表現に
opacity のチェイス点滅で光が走るマーキーライト。視線誘導や順路表示に
大ジャンプが横へ伝播する歓喜の波。達成セレブレーションの演出に
中心から距離順の delay でパルスを波及させる。一括更新・同期完了の通知に
左右スイングと重心移動のスカッシュを時間差で。楽しい待ち時間の演出に
同一パスを delay 違いでなぞらせて隊列を作る。データが流れていく表現に
上から順に落ちて着地、全員そろったら同時リセット。リスト項目の一括登場に
rotateY の順送りフリップで裏面を見せる。カード一覧の更新・切り替え表現に
wrapperを回して子を半径分ずらす周回の基本形。ローディングや関係マップの演出に
X/Y往復を1/4周期ずらして楕円軌道を合成。テック系ローディングやAI処理中の表現に
速度比をつけた2本針の等速回転。待機時間・処理中インジケーターに
内外リングの逆回転で機械の精密感を出す。スキャン中・解析中のHUD演出に
等速回転レイヤーと縮小レイヤーの入れ子で螺旋を作る。保存・集約アクションの表現に
奥行きをscaleと透明度だけで描く疑似3D周回。カルーセルや順番待ちの表現に
1つの回転wrapperの両端に大小を配置して共通重心を回す。同期・ペアリング中の表現に
半径比に合わせた速度の逆回転で噛み合いを見せる。処理中・設定画面の演出に
キーフレームの間隔を不均等にして近点加速を作る。巡回・送信ステータスの表現に
親の回転を子の逆回転で打ち消して水平を保つ。要素を見せ続ける回転カルーセルに
端の玉だけが弾かれる運動量の伝達。処理のリレーや受け渡し表現に
ease-in-out と alternate だけで作る等時往復。待機表示のアクセントに
沈み込みからの跳ね返りで弾性を出す。押下フィードバックや荷重表現に
衝突で運動量が端へ乗り移る玉突き。タスクの連鎖やパイプライン表現に
ゆっくり近づけて一気に弾く反発の緩急。吸着解除や分離アクションに
加速しながら中心へ落ちる引力表現。集約やゴミ箱への吸い込みに
傾く梁と counter-rotate で水平を保つ皿。比較・判定UIのメタファーに
ため→発射の緩急コントラスト。送信アクションや勢いの演出に
見えない力をしなりの時間差で描く。背景の環境演出や待機画面に
オーバーシュートで質量を感じさせる停止。パネルのスライドインに
回転する角丸矩形2枚で波面のうねりを作る定番技法+泡と揺れ戻し。待機画面やドリンク系の演出に
落下中の伸びと着水の扁平リングの連携。通知や送信完了の合図に
border-radius モーフと重なりで粘性を錯覚させる。ローディングの有機的な主役に
水位の上昇と注ぎの流線でチャージ感を出す。アップロード進捗や達成率の演出に
同じ keyframes を delay・サイズ違いで重ねる炭酸表現。リフレッシュ操作の背景に
減衰ウォブルで柔らかい質感を出す。マスコットのアイドル動作やボタンの待機に
ため→ちぎれ→落下の三拍子と本体の弾み戻り。処理待ちや時間経過のメタファーに
巨大な角丸矩形の等速回転で継ぎ目のない波を作る。ヒーローセクションの背景に
不定形ブロブの拡散フェード。画面遷移や選択時のにじみ演出に
蛇行する落下と遅れて続く痕跡ドット。ムードのある待機画面や天気UIに
同一頂点数の clip-path polygon 補間。状態遷移やモード切替の象徴に
border-radius 8値のオーガニック変形。アバター背景やヒーローの装飾に
transform-origin をヒンジにした rotateX 折りたたみ。アコーディオンの開閉に
scaleX と border-radius の連動でバネの伸び縮み。ボタンの展開表現に
10頂点 polygon の星⇄円モーフ。お気に入り登録のマイクロ演出に
くびれ役の要素で融合と分離を見せる。項目の複製・マージ表現に
rotateY と影の濃淡で紙の厚みを出す。チュートリアルの進行表現に
分割スライスの時間差スライド。画面転換やシャッフルの演出に
回転と border-radius 脈動の組み合わせ。待機中のアイデンティティマークに
border-width の増減で穴を開け閉め。円グラフやローディングの導入に
負のdelayで湧き続けるマトリョーシカズーム。没入系ローディングの背景に
軌道を点サンプリングしてlinearで繋ぐパス走行。同期待ちのインジケーターに
タイル1枚ぶんだけbackground-positionを流すバーバーポール。処理中のプログレスバーに
ease-inの拡大とborder-widthの連動で奥から迫るリング。ワープ感のある遷移演出に
2セット複製をtranslateX -50%で回す王道シームレス。ティッカーやロゴ帯に
欠けたリングと逆回転の短い弧の二重スピン。定番ローディングの主役に
中心の鼓動と等間隔に広がるソナーリングの同期。現在地マーカーやライブバッジに
逆位相のサインウェーブを伸縮バーで繋ぐ横向き二重らせん。解析中・同期中の演出に
clip-pathウェッジ6枚の正逆二重回転。待ち時間を飽きさせない装飾に
2セット複製の縦マーキーを3列の速度差で流すパララックス。データ流入の背景演出に
translateY と opacity を重ねる基本のフェードイン。モーダルやカードの登場に
scale のオーバーシュートで弾みを出すポップイン。バッジや通知ドットの出現に
左右交互 + delay の滑り込み整列。リスト項目やメニューの展開に
perspective 付き rotateY で順に起き上がるフリップイン。カード一覧の初期表示に
steps() で1文字ずつ刻むタイプライター。ターミナル風の見出しやデモ画面に
スラットを順に scaleX で開くリビール。画像やパネルの切り替えに
左右パネルの開閉で主役をポップインさせる。オンボーディングの演出に
四方から粒が集まって本体に置き換わる。生成完了・アップロード完了の表現に
clip-path inset のワイプとハイライトバーの並走。セクション見出しの登場に
四隅から破片が回転しながら飛来して組み上がる。ロゴやキービジュアルの登場に
沈み込みとリップルで押した手応えを再現。CTAボタンのマイクロインタラクションに
移動中のスカッシュとトラック濃度の連動。設定画面のON/OFFスイッチに
stroke-dashoffset で線を描く定番技法。保存完了・送信成功の合図に
ポップ+放射パーティクル+リングの三段重ね。いいね・お気に入りの快感演出に
減衰する振り子で余韻を作る。新着通知のアテンション表現に
進みの緩急と完了フラッシュで待ち時間を演出。アップロードの進捗表示に
background-position で光の帯を走らせる。読み込み中のプレースホルダーに
短く激しい横シェイクで「違う」を伝える。入力エラー・認証失敗の表現に
スロットのように数字をロールして止める。スコアや集計結果の発表に
delay・周期・サイズをばらして自然に舞わせる。達成・完了のお祝い画面に
拡がって消えるハローと本体の微かなスケール呼吸。待機状態やアイドル画面の主役に
浮遊と影の逆位相で空中感を作る。空状態イラストやヒーロー装飾に
delay違いの瞬きに、たまに走る流れ星を混ぜる。ダークテーマの背景演出に
速度と透明度の違う多層ドリフトで奥行きを出す。オンボーディング画面の背景に
大きさ・速度・透明度をばらした粒子の降下。季節演出やスプラッシュ画面に
個別keyframesの軌跡と明滅でランダム感を出す。夜の待機画面をそっと生かす演出に
skewとtranslateの遅いうねりで光のカーテンを作る。ヒーローセクションの背景に
二段スケールと休止で「ドクッドクッ」の生体リズム。ライブ配信中や接続中の表現に
細かなscale/skewジッターで炎の揺らぎを作る。ナイトモードのアクセントに
柔らかな光斑がゆっくり漂い重なる。読み物ページの背景を静かに呼吸させる演出に