css animation widthの%指定について

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

point

• cssプロパティanimationとkeyframesは３つ同じです。
• ベンダープレフィックスは書いてません。
• @keyframesのtranslate3d(0,0,0);は(x,y,z)です。(横軸,縦軸,奥行き)
• 3秒かけて(0,0,0)から(100%,0,0)にアニメーションします。

#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);
	}
}