CSS - animation-play-state

• トップ
• CSSリファレンス
• animation-play-state

概要

サポート (説明)

説明

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

使用例

@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;
}

<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>

関連項目

リンク

• http://www.w3.org/TR/css3-animations/#animation-play-state-property
• https://developer.mozilla.org/ja/docs/Web/CSS/animation-play-state
• http://caniuse.com/#feat=css-animation