css animationでアニメーションさせる要素のwidthを%指定するとどうなるのか?3つの指定を比較します。
#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); } }
width: 3em;でtransform:translate3d(100%,0,0);という場合の100%は自分の横幅(3em)という事。つまり3emだけ移動する。
width: 100%;(表示画面の100%)でtransform:translate3d(100%,0,0);という場合の100%は自分の横幅の100%という事。つまり表示画面の100%だけ移動する。
width: 20%;(表示画面の20%)でtransform:translate3d(100%,0,0);という場合の100%は自分の横幅の20%という事。つまり表示画面の20%だけ移動する。