animation-play-state
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
animation-play-state
は CSS のプロパティで、アニメーションが実行中か停止中かを設定します。
試してみましょう
停止したアニメーションを再開すると、アニメーションの流れの最初からではなく、停止した位置からアニメーションが始まります。
構文
css
/* 単一のアニメーション */
animation-play-state: running;
animation-play-state: paused;
/* 複数のアニメーション */
animation-play-state: paused, running, running;
/* グローバル値 */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: revert;
animation-play-state: revert-layer;
animation-play-state: unset;
値
メモ: animation-*
プロパティにカンマ区切りで複数の値を指定した場合、 animation-name
に現れる順にアニメーションに適用されます。アニメーションの数と animation-*
プロパティの値が一致しない場合は、複数のアニメーションプロパティ値の設定 を参照してください。
公式定義
形式文法
例
アニメーションの停止
このアニメーションは停止していますが、ポインターを当てると実行されます。
HTML
html
<div class="box"></div>
CSS
css
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
animation-name: rotate;
animation-duration: 0.7s;
animation-iteration-count: infinite;
animation-play-state: paused;
}
.box:hover {
animation-play-state: running;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
結果
矩形にポインターを当てるとアニメーションが始まります。
例については CSS アニメーションを参照してください。
仕様書
Specification |
---|
CSS Animations Level 1 # animation-play-state |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS アニメーションの使用
- JavaScript
AnimationEvent
API - その他のアニメーション関連プロパティ:
animation
,animation-composition
,animation-delay
,animation-direction
,animation-duration
,animation-fill-mode
,animation-iteration-count
,animation-name
,animation-timeline
,animation-timing-function