-
Origin-aware animation: An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.
- Related: Transform origin is the anchor point a scale or rotation grows or spins from. It's the CSS property that makes this work.
-
Rubber-banding: Resistance and snap-back when you drag past a boundary (the iOS overscroll feel).
-
Number ticker: Digits rolling or counting up to a value.
- Pair it with Tabular numbers, which are fixed-width digits so numbers don't shift around as they change. They're essential for tickers, timers, and counters.
-
Skeleton / Shimmer: A placeholder with a moving sheen shown while content loads.
-
Parallax: Background and foreground move at different speeds while scrolling, creating depth.
-
Momentum: Motion that carries velocity, especially after a drag or interruption.
- Related: Velocity is how fast and in which direction an element is moving. A spring carries it into the next animation when interrupted, so a flicked element keeps its speed.
- Related: Drag is moving an element by grabbing it, often with momentum when released.
Test run: six loose descriptions of motion effects. Each returned the glossary term, with related terms where they apply. Short run; the glossary is a fixed list, so effects outside it get an approximation.
できること
Web アニメーションの逆引き用語集です。見た目や感覚（「弾む」「滑って出ていく」「自分で描かれていく」）を言葉にすると、最も近い用語とその定義を、最良のものを先頭に、近い候補を1〜2個と違いを添えて返します（例：Clip-path と Mask、Pop in と Bounce）。用語集の記述をそのまま引用し、ぴったり合うものがないときははっきり伝え、用語集の外の言葉は作りません。登場と退場、シーケンスとタイミング、変形、状態間の遷移、スクロール、フィードバック、イージング、スプリング、ループ、仕上げの効果、パフォーマンス、アニメーションの原則を扱います。
出力
用語、1行の定義、必要なら最も近い候補。
こんな場面に
欲しい効果は分かっているが名前が分からない開発者、デザイナー、ライター。デザイナーや AI に頼むための正しい言葉が欲しいとき。
低リスク：指示のみのファイルで、スクリプトはなく、ネットワークにも接続せず、ファイルも書き込みません。固定の用語集なので、載っていない効果には近似の説明か、該当する用語がないという回答になります。あいまいな説明6つで一度試用し、いずれも用語集の用語を返し、該当する場合は関連用語も添えました。質問なしで呼ぶと挨拶だけを返します。作者 Emil Kowalski、MIT。