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 のプロパティで、アニメーションが実行中か停止中かを設定します。

試してみましょう

animation-play-state: paused;

animation-play-state: running;

<section class="flex-column" id="default-example"> <div class="animating" id="example-element"></div> </section>

#example-element { background-color: #1766aa; color: white; margin: auto; margin-left: 0; border: 5px solid #333; width: 150px; height: 150px; border-radius: 50%; } .animating { animation-name: slide; animation-duration: 3s; animation-timing-function: ease-in; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes slide { from { background-color: orange; color: black; margin-left: 0; } to { background-color: orange; color: black; margin-left: 80%; } }

停止したアニメーションを再開すると、アニメーションの流れの最初からではなく、停止した位置からアニメーションが始まります。

構文

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;

値

running: アニメーションが現在実行中です。
paused: アニメーションが現在停止中です。

メモ: animation-* プロパティにカンマ区切りで複数の値を指定した場合、 animation-name に現れる順にアニメーションに適用されます。アニメーションの数と animation-* プロパティの値が一致しない場合は、複数のアニメーションプロパティ値の設定を参照してください。

公式定義

初期値	`running`
適用対象	すべての要素、`::before` / `::after` 擬似要素
継承	なし
計算値	指定通り
アニメーションの種類	アニメーション不可

形式文法

animation-play-state = 
 <single-animation-play-state># 

<single-animation-play-state> = 
 running |
 paused

例

アニメーションの停止

このアニメーションは停止していますが、ポインターを当てると実行されます。

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