플레이어
네이티브 애니메이션을 재생, 일시정지, 다시 재생합니다.
일시정지된 타임라인
↗
참조 견본 안에서
애니메이션 실행
네이티브 체크박스와 작성한 선택자가 자식의 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을 사용합니다. 뷰포트 자체의 재생과 다시 재생이 문서 타임라인을 제어합니다.