CSS 参考手引

CSS @規則(RULES)

CSS 属性全書

CSS3 animation-timing-function 属性 CSS3 animation-name 属性

CSS3 animation-play-state 属性の使用方法および例

CSS3 animation-play-state属性は、アニメーションを再生するか停止するかを指定します。

以下の表は、この属性の使用範囲とバージョン履歴をまとめています。

デフォルト値：	running
適用：	すべての要素::beforeおよび::after 仮要素
継承：	ありません
アニメーションを作成可能：	いいえ。参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScript 構文:	object　　　object.style.animationPlayState="paused"

animation-play-stateの使用構文

この属性の構文は以下の通りです：

animation-play-state:　paused　|　running　|　initial　|　inherit

以下の例では、animation-play-state属性。

例

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name:　moveit;
　　　　-webkit-animation-duration:　2s;
　　　　-webkit-animation-play-state:　paused;
　　　　
　　　　animation-name:　moveit;
　　　　animation-duration:　2s;
　　　　animation-play-state:　paused;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

テストして見て‹/›

属性値

以下のテーブルはこの属性の値を説明しています。

値	説明
paused	アニメーションが現在一時停止されていることを指定します。
running	アニメーションが現在実行中であることを指定します。デフォルト値です。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のanimation-play-state属性の計算値。

注意：animation-play-state属性とJavaScriptを組み合わせて使用して、ループの途中でアニメーションを一時停止できます。

ブラウザの互換性

animation-play-state属性のブラウザの互換性、すべての主要ブラウザがこの属性をサポートしています。

	Firefox 5+ ^-moz-、15 + Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 4+ ^-webkit- オペラ 12+ ^-o-、15+ ^-webkit-

さらに詳しく

以下のチュートリアルを参照してください：CSS3アニメーション。

CSS3 animation-timing-function 属性 CSS3 animation-name 属性