コンポーネント

プレーヤー

ネイティブアニメーションの再生、一時停止、リプレイ。

停止中の時間軸

↗

The player reads the actual animation state.

リファレンスの見本内

アニメーションを実行する

ネイティブのチェックボックスと記述したセレクターが、子要素の CSS 再生状態を制御します。一時停止しても再生位置を保ちます。動きを減らす設定では一時停止したままとなり、印刷時にはアニメーションを取り除きます。

使用箇所：テーマのガイド.

使い方とインターフェース

DemoMotion はアニメーションする子要素を包み、再生／一時停止、リプレイ、現在の状態を備えた div.ui-player を追加します。アニメーションは停止状態で始まり（ハイドレーション前も data-playback="paused" で停止）、動きを抑える設定が変わると再び停止します。

<DemoMotion>  <DemoItem tone="blue" className="(animation-name:rotate) (animation-duration:2s) (animation-iteration-count:infinite)">↗</DemoItem></DemoMotion>

<div class="ui-player" role="group" aria-label="Animation controls" data-state="paused">  <button type="button" class="ui-button" data-size="sm">Play</button>  <button type="button" class="ui-button" data-size="sm" data-variant="quiet">Replay</button>  <span class="ui-player-time"><output>Paused</output></span></div>

iframe 内のドキュメントには、代わりに DemoViewport motion を使います。ビューポート自身の再生とリプレイが、ドキュメントのタイムラインを制御します。