animation-play-state

animation-play-stateは@keyframesで作成したアニメーションが動いているか停止しているかの状態を指定できるプロパティです。

デフォルトの値はrunningだが、この値をpausedに変更することでアニメーションを停止されることができます。

animation-play-state : paused;

次のサンプルはdiv要素にマウスが乗った際にアニメーションを停止させる指定方法です。(WebKitとモダンブラウザのみに対応)

div{
	width:100px;
	height:100px;
	background: red;
	position: relative;
	-webkit-animation-name:loop;
	animation-name:loop;
	-webkit-animation-duration:4000ms;
	animation-duration:4000ms;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
}
div:hover{
	-webkit-animation-play-state : paused;
	animation-play-state : paused;
}
@-webkit-keyframes loop {
	0% {left:0px;}
	100% {left:200px;}
}
@keyframes loop {
	0% {left:0px;}
	100% {left:200px;}
}

sample

一部のブラウザでは「-webkit-」といったベンダープレフィックスを利用して実装されていたこともあるので、ベンダープレフィックスを付けた記述も追加することでより多くのブラウザをサポートできるでしょう。IEではIE10よりベンダープレフィックスなしで実装されています。

-webkit-animation-play-state : paused;
animation-play-state : paused;

CSS３のanimationはAndroid端末での不具合が多いため利用する際には注意してください。(参考:@keyframesとAndroid – to-R)

対応ブラウザ

IE	Chrome 28	Safari	Firefox 22	iOS	Android
◯ 10〜	△	△ 5〜	◯	△ 3.2〜	△ 2.1〜

◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
Google ChoromeとFirefoxは執筆時点での最新バージョンでの実装状況です。

参考URL

4.7. The ‘animation-play-state’ Property - W3C

登録日 : 2013年07月28日最終更新日 : 2013年7月28日

CSSリファレンス