CSS - animation-play-state

概要

属性名 animation-play-state
値 <single-animation-play-state> [, <single-animation-play-state> ]*
値の詳細 <single-animation-play-state> = running | paused
初期値running
適用可能要素すべての要素 (::before, ::after を含む)
継承継承しない
メディアvisual
アニメーション不可

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS3105(-moz)
16		4(-webkit)
43		15(-webkit)
30		4(-webkit)
9

説明

アニメーションを実行、または一時停止の状態にします。このプロパティを参照することにより現在のアニメーションの状態を知ることができます。また、このプロパティに設定することにより、アニメーションを一時停止、開始することができます。アニメーションに関する概要は animation を参照してください。

値説明
runningアニメーションを実行中の状態にします。
pausedアニメーションを一時停止の状態にします。

使用例

CSS
@keyframes myframe {
  from {
    color: #66f;
    font-size: 20pt;
  }
  to {
    color: #f66;
    font-size: 24pt;
  }
}
.test {
  position: absolute;
  animation-name: myframe;
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
  animation-play-state: paused;
}
HTML
<div>
 <input type="button" value="Start" onclick="document.getElementById('a1').style.animationPlayState='running'">
 <input type="button" value="Stop" onclick="document.getElementById('a1').style.animationPlayState='paused'">
</div>
<div id="a1" class="test">A</div>
表示
A

関連項目

@keyframes, animation, animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state

リンク

Copyright (C) 2015 杜甫々
初版：2015年11月29日、最終更新：2015年11月29日
https://www.tohoho-web.com/css/prop/animation-play-state.htm