webmas.jp

animation-direction プロパティは、アニメーション再生の向きを反転再生させるかどうかを指定します。

プロパティの詳細

値

normal, alternate, reverse, alternate-reverse

初期値

normal

対象

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

継承

しない

CSS レベル

CSS 3

値

narmal

順方向に再生

reverse

逆方向に再生

alternate

順方向から開始し往復する

alternate-reverse

逆方向から開始し往復する

サンプル

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: 2s;
	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;
	}
}

デモ