CSS3

プロパティ

animation-play-state

→● mdn

アニメーションの稼働中／静止。

animation-play-state プロパティは、アニメーションを稼働中にするか／静止させるかを定義する。

以下のCSSが組み込んであります：

<single-animation-play-state>

＝running | paused

running

アニメーションは、このプロパティが running に設定されている間は、通常どおり進行する。

<DIV style="border:1px solid black;
 width:200px; height:50px;
">
 <DIV style="position:relative;
  width:25px; height:25px; background:red;
  left:0px; top:0px;
  animation-name:Test;
  animation-timing-function:linear;
  animation-duration:5s;
  animation-play-state:running;
 "></DIV>
</DIV>

paused

このプロパティが paused に設定されている間は、アニメーションは，それを制御する“時計”が停止されたかのように 静止され、それまでの進捗は要素に適用され続ける。静止が解かれた（running に戻された）時点で、アニメーションは、時計が進み始めたかのように、その状態から開始される。

遅延の段階で animation-play-state プロパティが paused にされた場合、遅延時計も静止され、running に戻され次第、再開される。

<DIV style="border:1px solid black;
 width:200px; height:50px;
">
 <DIV id=IdDiv style="position:relative;
  width:25px; height:25px; background:red;
  left:0px; top:0px;
  animation-name:Test;
  animation-timing-function:linear;
  animation-duration:5s;
  animation-play-state:paused;
 "></DIV>
</DIV>
<BUTTON onclick="IdDiv.style.animationPlayState='running'">再生</BUTTON>
<BUTTON onclick="IdDiv.style.animationPlayState='paused'">停止</BUTTON>

テスト