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;

CSS3の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日

同じカテゴリー(Animation)のエントリー

検索

スポンサードリンク

バージョン

リファレンス