webmas.jp

animation-name プロパティはアニメーションが再生中か停止中かを指定します。

プロパティの詳細

値

running, paused

初期値

running

対象

すべての要素、::before, ::after 疑似要素

継承

しない

CSS レベル

CSS 3

値の詳細

running

アニメーションを実行

paused

アニメーションを停止する

サンプル

html

<div class="box1">
<p>アニメーションのテスト</p>
</div>

CSS

div#box1 {
	animation-name: animation;
	animation-duration: 2s;
	animation-iteration: ease;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-delay: 0s;
	animation-play-state: paused;
	overflow: hidden;
}

@keyframes animation {
	0% {
		width: 10px;
		height: 10px;
		background-color: #eeeeee;
		position: relative;
		left: 0px;
	}
	100% {
		width: 200px;
		height: 100px;
		background-color: #aaaaaa;
		position: relative;
		left: 300px;
	}
}

デモ

アニメーションを停止中から再度実行に切り替えると停止した位置からアニメーションが再開します。