css animation widthの%指定について

css animationでアニメーションさせる要素のwidthを%指定するとどうなるのか?3つの指定を比較します。

point

#case1{
	background-color:magenta;
	height: 3em;
	width: 3em;
	animation:name linear forwards 3s;
}
#case2{
	background-color:cyan;
	height: 3em;
	width: 100%;
	animation:name linear forwards 3s;
}
#case3{
	background-color:yellow;
	height: 3em;
	width: 20%;
	animation:name linear forwards 3s;
}

@keyframes name {
	0% {
		transform:translate3d(0,0,0);
	}
	100% {
		transform:translate3d(100%,0,0);
	}
}

case1

width: 3em;でtransform:translate3d(100%,0,0);という場合の100%は自分の横幅(3em)という事。つまり3emだけ移動する。

case2

width: 100%;(表示画面の100%)でtransform:translate3d(100%,0,0);という場合の100%は自分の横幅の100%という事。つまり表示画面の100%だけ移動する。

case3

width: 20%;(表示画面の20%)でtransform:translate3d(100%,0,0);という場合の100%は自分の横幅の20%という事。つまり表示画面の20%だけ移動する。

manaka design