モーション

クラス

animation- と transition- は、どちらも duration と easing の名前空間を参照します。独自のキーはこの 2 つの名前空間で重複させないでください。同じキーがあると曖昧になります。一方、animate- はアニメーションのショートハンド全体を参照します。

値

10 個のアニメーショントークンはキーフレーム名を含み、無限に繰り返します。7 つの継続時間は時間の長さを、9 つのイージング曲線は時間の進行と値の進行の対応を指定します。比較用の表示は 1 回だけ再生し、初期状態では一時停止し、動きを抑える設定にも従います。

アニメーション

継続時間

イージング

アニメーションの一部分を上書きする

animate-pulse は、1s の継続時間を含む animation ショートハンド全体を設定します。同じ条件では animation-slow がショートハンドより後になり、継続時間を 300ms に置き換えます。キーフレーム名と繰り返し回数は変わらず、class 属性を並べ替えても結果は変わりません。

どちらも同じ pulse キーフレームを使います。バーが測るのは 1 回の反復の継続時間であり、アニメーションの進行やレンダリング速度ではありません。プリセットは繰り返しますが、この比較では 1 回の反復だけを取り出しています。

テキストによる説明

1. animate-pulse のショートハンドは pulse 1s infinite を指定し、1 回の反復は 1 秒です。
2. 同じ条件では animation-slow が animate-pulse より後になり、継続時間だけを var(--duration-slow)、つまり 300ms に置き換えます。pulse キーフレームと無限の繰り返し回数は変わりません。
3. 両方の横棒はゼロから始まり、同じミリ秒軸の上で長さの比率は 1000:300 です。測っているのは宣言した 1 回の反復の継続時間であり、性能や図形の移動距離ではありません。
4. プリセットの pulse トークンは無限に繰り返します。1 回だけ再生するには、ネイティブの繰り返し回数を指定するか、独自のトークンを定義します。クラス名を並べ替えても、生成ルールの順序は変わりません。

継続時間やイージングのファミリーで一部分を調整するか、その変数を使って独自のアニメーショントークンを組み立てます。(animation-duration:450ms) のような明示的なネイティブ宣言でも、値を直接上書きできます。2 本のバーは同じ時間軸で 1 回の反復を示しており、レンダリング性能を比較するものではありません。

アニメーショントークンは、その値が参照するキーフレームを保持します。継続時間やイージングのクラスだけでは、アニメーション名は指定しません。トランジションにはプロパティ値の変化も必要です。transition-fast が指定するのは継続時間であり、ホバー状態やプロパティのリストではありません。

遅延が変えるのは効果の開始時刻であり、継続時間を延ばすわけではありません。イージングは継続時間内の進行を変えます。制御点が縦方向の 0–1 の範囲を超える曲線は、オーバーシュートや逆戻りを起こすことがあります。ただし、アニメーション対象のプロパティが描画値を制約する場合もあります。

必須でない動きには @motion-safe を付けます。プリセットアニメーションを 1 回だけ再生するには、同じ条件で (animation-iteration-count:1) を追加します。コンポーネントの登場アニメーションを組み立てる方法はテーマガイドで、キャプチャーしたページ状態間の遷移はビューの遷移ガイドで説明しています。

関連項目： 生成ルールの順序、ネイティブの animation ショートハンド、ビューの遷移.

使用例

動きが許可されている場合に、ホバーによるリンクの背景色の変化をなめらかにします。リンク先は値の表です。

<a href="#values" class="… (transition-property:background-color) transition-fast@motion-safe transition-smooth@motion-safe bg-surface-inset:hover">View motion values</a>

@layer theme {  :root,  :host {    --color-zinc-5: oklch(96.5% .0011 265);    --color-zinc-100: oklch(15% .0016 265)  }  :root,  :host {    --color-surface-inset: light-dark(var(--color-zinc-5), var(--color-zinc-100))  }  :root,  :host {    --duration-fast: .15s;    --easing-smooth: cubic-bezier(.4, 0, .2, 1)  }}@layer utilities {  .\(transition-property\:background-color\) {    transition-property: background-color  }  .bg-surface-inset\:hover:hover {    background-color: var(--color-surface-inset)  }  @media (prefers-reduced-motion: no-preference) {    .transition-fast\@motion-safe {      transition-duration: var(--duration-fast)    }  }  @media (prefers-reduced-motion: no-preference) {    .transition-smooth\@motion-safe {      transition-timing-function: var(--easing-smooth)    }  }}

カスタマイズ

継続時間とイージングのトークンからアニメーションを組み立て、キーフレームをネイティブ CSS に宣言します。--animate-reveal を定義すると animate-reveal が使えるようになります。

@theme {  --animate-reveal:    reveal var(--duration-slow) var(--easing-crisp) both;}@keyframes reveal {  from { opacity: 0; translate: 0 .5rem; }}

@keyframes reveal {  from {    opacity: 0;    translate: 0 .5rem;  }}@layer theme {  :root,  :host {    --duration-slow: .3s;    --easing-crisp: cubic-bezier(.16, 1, .3, 1)  }  :root,  :host {    --animate-reveal: reveal var(--duration-slow) var(--easing-crisp) both  }}@layer utilities {  @media (prefers-reduced-motion: no-preference) {    .animate-reveal\@motion-safe {      animation: var(--animate-reveal)    }  }}

関連項目： テーマのディレクティブ、テーマトークン.