animation-vocabulary

アニメーション用語集

初回の応答

このスキルが特定の質問なしで最初に呼び出されたときは、次のようにだけ応答してください:

あなたが説明するあらゆるモーションエフェクトに名前を付ける準備ができています。私の知識は Emil Kowalski のアニメーション哲学に基づいています。

ユーザーが質問するまで、他の情報は一切提供しないでください。

モーションやエフェクトの曖昧な説明を正確な用語に変換し、ユーザーが何を求めればよいかを分かるようにします。

クイックスタート

ユーザーがエフェクトをざっくりと説明します。あなたは一致する用語を次の形式で返します:

**Stagger** — Animate several items one after another with a small delay between each, creating a cascade.

複数の用語が当てはまる場合は、最適な候補を最初に挙げ、次に 1〜2 個の代替案を、それらがどう異なるかの一行のメモとともに示します。

手順

1. キーワードではなく意図を読み取ります。 ユーザーは技術的な名称ではなく、自分が見たものや感じたもの(「バネのような」「滑り落ちる」「ひとりでに描かれる」)を説明します。その感覚を以下の用語集に対応付けます。
2. 用語集をそのまま引用します。 その説明が正式なものです。そのまま使用し、言い換えないでください。
3. 近い用語を区別します。 二つが競合する場合(Clip-path と Mask、Pop in と Bounce、Shared element transition と Layout animation)、ユーザーが選べるように対比させます。
4. 何も正確に一致しない場合は、最も近い用語を挙げ、それが近似であるとはっきり伝えるか、用語集の語彙でエフェクトを説明します(例:「それは scale-in の登場のスタッガーです」)。
5. この用語集の範囲内にとどまります。 用語が本当にここにない場合は、新しい用語をでっち上げるのではなく、そう伝えてください。ただし、これらの言葉を使って概念を説明することはできます。
6. 簡潔に保ちます。 命名の質問には名前が求められており、長文は不要です。用語を先頭に示し、求められた場合にのみ詳しく説明します。

例

例 1 — 感覚ベース ユーザー:「クリックしたボタンの中央からではなく、そのボタンからポップオーバーが成長するように見えるのは何と呼ばれますか?」 出力:

**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.

例 2 — 区別 ユーザー:「ある画像が別の画像に変わるやつ。」 出力:

**Morph** — One shape smoothly turns into another shape, e.g. Dynamic Island.

Close alternates:
- **Crossfade** — if they simply fade over each other in the same spot.
- **Shared element transition** — if an element travels and transforms from one position into another.

例 3 — 物理的な感覚 ユーザー:「iOS のスクロールで、引きすぎると抵抗してスナップバックするやつ。」 出力:

**Rubber-banding** — Resistance and snap-back when you drag past a boundary (the iOS overscroll feel).

用語集

プロジェクトの /vocabulary ページを反映した厳選されたスナップショットです。どちらかが変更された場合は、両方を同期させてください。

登場と退場 — 要素がどのように現れ、消えるか

• Fade in / Fade out — 要素が不透明度を変えることで現れたり消えたりします。
• Slide in — 要素が画面外(左、右、上、または下)からスライドして入ってきます。
• Scale in — 要素が現れるときに小さいサイズから全体サイズへと拡大します。多くの場合、フェードと組み合わせます。
• Pop in — 要素がわずかに行き過ぎて現れ、所定の位置に跳ねるように収まります。
• Reveal — コンテンツが徐々に現れます。多くの場合、clip-path やマスクをアニメーション化することで行います。
• Enter / Exit — 要素が画面に追加または画面から削除されるときに再生されるアニメーション。

シーケンスとタイミング — 複数の要素や瞬間を調整する

• Keyframes — アニメーション内の定義されたポイント(0%、50%、100%)で、ブラウザーがその間を補間します。
• Interpolation / Tween — 開始値と終了値の間のすべての中間フレームを生成し、モーションを連続的にします。
• Stagger — 複数の項目をそれぞれ少しの遅延を挟んで次々にアニメーション化し、連鎖を生み出します。
• Orchestration — 複数のアニメーションを意図的にタイミング調整し、一つのまとまったモーションのように感じられるようにします。
• Delay — アニメーションが始まるまでの時間。
• Duration — アニメーションにかかる時間。
• Fill mode — アニメーションが始まる前や終わった後に、要素が最初または最後のフレームのスタイルを保つかどうか(例: forwards)。
• Stepped animation — カウントダウンタイマーのように、離散的なステップに分割されたアニメーション。

モーションとトランスフォーム — 要素の位置、サイズ、角度を変更する

• トランスレート — 要素を X 軸または Y 軸に沿って移動します。
• スケール — 要素を拡大または縮小します。
• 回転 — 要素をある点を中心に回転させます。
• スキュー — 要素を X 軸または Y 軸に沿って傾け、長方形の形からせん断変形させます。
• 3D チルト / フリップ — 3D 空間で回転（rotateX / rotateY）させて奥行きを加えます。
• パースペクティブ — 3D 効果の強さ — 値を小さくすると奥行きが強調され、視聴者が近くにいるように見えます。
• トランスフォーム原点 — スケールや回転がそこから拡大または回転する基準点です。
• 原点を考慮したアニメーション — 要素がトリガーから現れるようにアニメーションします。例えば、ポップオーバーが CSS のデフォルトである自身の中心からではなく、それを開いたボタンから広がるように表示されます。

状態間のトランジション — ある状態、ビュー、要素を別のものに接続する

• クロスフェード — ある要素がフェードアウトするのと同時に別の要素が同じ位置でフェードインします。
• 連続性トランジション — 変更前と変更後を視覚的につなげることで、ユーザーの方向感覚を保つ変化です。例えば、同じ長方形を拡大したり縮小したりすることです。
• モーフ — ある形状が別の形状へ滑らかに変化します。例：Dynamic Island。
• 共有要素トランジション — 要素がある位置から別の位置へ移動しながら変形します。例えば、サムネイルがカードに拡大するようなものです。
• レイアウトアニメーション — 要素のサイズや位置が変わるとき、瞬時に切り替わるのではなく新しい位置へアニメーションします。
• アコーディオン / コラプス — セクションが高さを滑らかに展開・折りたたんでコンテンツを表示または非表示にします。
• 方向を考慮したトランジション — 進むときは一方向に、戻るときは逆方向にコンテンツがスライドし、ナビゲーションに方向感覚を与えます。

スクロール — スクロールやビュー間のナビゲーションに連動するモーション

• スクロールリビール — 要素がビューポートに入るとフェードインまたはスライドして所定の位置に現れます。
• スクロール駆動アニメーション — 進行状況がスクロール位置に直接連動するアニメーションです。
• パララックス — スクロール中に背景と前景が異なる速度で動き、奥行きを生み出します。
• ページトランジション — あるページまたはルートから別のページへ移動するときに再生されるアニメーションです。
• ビュートランジション — ブラウザが2つの状態またはページ間でモーフし、共有要素をつなぎます。

フィードバックとインタラクション — ユーザーの操作に応答する

• ホバーエフェクト — カーソルが要素の上に移動したときの視覚的な変化です。
• プレス / タップフィードバック — 要素がクリックされたときに微妙に縮小し、物理的な感触を与えます。
• 長押しで確認 — ユーザーがボタンを押し続ける間に満ちていくプログレスエフェクトです。
• ドラッグ — 要素をつかんで移動させることです。多くの場合、離したときに慣性が働きます。
• ドラッグで並べ替え — リスト内の項目をドラッグして並べ替えることです。その間、他の項目は場所を空けるために移動します。
• スワイプで閉じる — ドロワーやトーストのように、要素を画面外へドラッグして閉じることです。
• ラバーバンディング — 境界を超えてドラッグしたときの抵抗と跳ね返りです（iOS のオーバースクロールの感触）。
• シェイク / ウィグル — エラーや拒否された入力を示す、素早い左右の揺れです。
• リップル — タップした点から円が広がり、押したことを確認します。

イージング — アニメーション中に速度がどのように変化するか

• イージング — アニメーションが加速または減速する割合です。
• イーズアウト — 速く始まり、ゆっくり終わります。ほとんどの UI と、ユーザーに応答するあらゆるもののデフォルトです。
• イーズイン — ゆっくり始まり、速く終わります。通常は避けられます。鈍重に感じることがあります。
• イーズインアウト — 遅く、速く、遅く。すでに画面にある要素が A から B へ移動するのに適しています。
• リニア — 一定の速度です。UI では避けてください。スピナーやマーキー用に取っておきましょう。
• キュービックベジェ — 精密な制御のために定義するカスタムイージングカーブです。
• 非対称イージング — 加速と減速が異なる割合で行われるカーブです。対称なものより生き生きと感じられます。

スプリングアニメーション — 固定時間のイージングに代わる物理ベースのモーション

• スプリング — 設定された時間ではなく、物理法則（テンション、質量、ダンピング）によって駆動されるモーション。
• スティフネス / テンション — スプリングがどれだけ強く目標へ引き寄せられるか。高いほどキビキビした動きになります。
• ダンピング — スプリングがどれだけ早く収束するか。ダンピングが低いほど、バウンスと振動が大きくなります。
• 質量 — アニメーションする要素がどれだけ重く感じられるか。質量が大きいほど、動きは遅く、もっさりします。
• バウンス — 行き過ぎてから収束することで、遊び心を加えるスプリング。
• 知覚上の持続時間 — 内部では細かく収束し続けているにもかかわらず、スプリングが終了したと感じられるまでの長さ。
• 慣性 — 速度を引き継ぐモーション。特にドラッグや中断の後で顕著です。
• 速度 — 要素がどれだけ速く、どの方向に動いているか。中断されたときスプリングは次のアニメーションへ速度を引き継ぐため、はじかれた要素はその速さを保ちます。
• 中断可能なアニメーション — 最後まで再生し終えるのではなく、途中で滑らかに方向転換できるアニメーション。

ループ＆アンビエントモーション — 自律的に動作するアニメーション

• マーキー — テキストやコンテンツがループで連続的にスクロールするもの。
• ループ — 指定した回数または無限に繰り返されるアニメーション。
• 代替（ヨーヨー） — 各反復で順方向に再生してから逆再生するループ。開始位置に戻るのではありません。
• オービット — ある要素が別の要素の周りを連続的な軌道で周回すること。
• パルス — 注意を引くための、穏やかに繰り返されるスケールや不透明度の変化。
• フロート — 穏やかで連続的な上下の漂い。静止した要素を生き生きと、無重力のように感じさせます。
• アイドルアニメーション — 要素がただそこにあり、操作されるのを待っている間に再生される繊細なモーション。

仕上げ＆エフェクト — 良いものと優れたものを分ける小さな配慮

• ブラー — 要素を柔らかくしたり、細かな欠陥を覆い隠したりするために使われるぼかしフィルター。
• クリップパス — 要素を形状に切り抜くもの。リビール、マスク、ビフォーアフタースライダーに使われます。
• マスク — 形状やグラデーションを使って要素の一部を隠したり表示したりするもの。クリップパスに似ていますが、柔らかくフェード可能なエッジを持ちます。
• ビフォー / アフタースライダー — 2 枚の重ねた画像の間をワイプして比較する、ドラッグ可能な仕切り。
• ラインドローイング — 見えないペンがなぞるように、SVG パスが自ら描かれていくもの。
• テキストモーフ — テキストが変化するときに 1 文字ずつアニメーションし、新しい値に注意を引くもの。
• スケルトン / シマー — コンテンツの読み込み中に表示される、動く光沢付きのプレースホルダー。
• ナンバーティッカー — 数字が回転したり、値までカウントアップしたりするもの。
• 等幅数字 — 変化しても数字がずれないようにする固定幅の桁。ティッカー、タイマー、カウンターには不可欠です。
• タイプライター — 入力されているかのように、テキストが 1 文字ずつ現れるもの。

パフォーマンス — モーションをカクつかせず滑らかに保つもの

• フレームレート（FPS） — 1 秒間に描画されるフレーム数。60fps が滑らかなモーションの基準で、新しいディスプレイでは 120fps です。
• ジャンク — アニメーションに追いつけずブラウザがフレームを落としたときに見える、目立つカクつき。
• ドロップフレーム — ブラウザが描画の期限に間に合わなかったフレーム。モーションに小さな引っかかりを生じさせます。
• コンポジティング — レイアウトやペイントをやり直さずに、GPU に要素を独自のレイヤーで移動またはフェードさせること。
• will-change — 要素がまもなくアニメーションすることをブラウザに伝え、事前に独自のレイヤーへ昇格できるようにする CSS ヒント。
• レイアウトスラッシング — width、height、top、left などのプロパティをアニメーションさせることで、ブラウザが毎フレームレイアウトを再計算せざるを得なくなり、ジャンクを引き起こすこと。

知っておくべき原則 — いつ、どのようにアニメーションさせるかを導く概念

• 目的のあるアニメーション — モーションは機能を果たすべきです — 方向を示す、フィードバックを与える、関係性を表す — 単に装飾するだけではありません。
• 予備動作 — 動きの前に逆方向へ小さく振りかぶることで、これから何が起こるかをほのめかします。
• フォロースルー — 要素の一部は主要な動きが止まった後も動き続け、わずかに落ち着くことで、重みを加えます。
• スクワッシュ & ストレッチ — 動きに合わせて要素を変形させ、重み、速度、柔軟性を伝えます。
• 知覚されるパフォーマンス — 適切なアニメーションは、実際には速くなくても、インターフェースをより速く感じさせます。
• 使用頻度 — ユーザーがアニメーションを見る頻度が高いほど、短く控えめにすべきです。
• 空間的な一貫性 — 要素が状態をまたいでも同一性と位置を保つようにアニメーションさせ、ユーザーがどこへ移動したかを見失わないようにします。
• ハードウェアアクセラレーション — transform と opacity をアニメーションさせることで、GPU がモーションを滑らかに保てます。
• モーションの低減 — ユーザーの prefers-reduced-motion 設定を尊重し、モーションを抑えるか削除します。