animation-play-state
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: unset;
値
running
-
アニメーションが現在実行中です。
paused
-
アニメーションが現在停止中です。
メモ: animation-*
プロパティにコンマ区切りで複数の値を指定した場合、 animation-name
プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定 を参照してください。
公式定義
形式文法
例
停止中のアニメーション
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-play-state: paused;
}
@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