关于@keyframes定义动画的问题_html/css_WEB-ITnose

我想让一个长方形先转30度，再向右走200px距离，然后再转330度，最后走回原位。（代码不考虑兼容性）









运行的时候不是按我想的步骤来的，而是：转30度和向右走同时进行，转330度和往回走同时进行。请问为什么？
怎么写正确的代码完成我的要求？

回复讨论(解决方案)

@keyframes donghua
{
0% {width:120px;height:50px;left:0px; top:0px;}
25% {transform:rotate(30deg);left:0px;}
50% {transform:rotate(30deg);left:200px; top:0px;}
75% {transform:rotate(330deg);left:200px;}
100% {transform:rotate(330deg);left:0px; top:0px;}
}

@keyframes donghua{ 0%  {width:120px;height:50px;left:0px; top:0px;} 25% {transform:rotate(30deg);left:0px;} 50% {transform:rotate(30deg);left:200px; top:0px;} 75% {transform:rotate(360deg);left:200px;}100% {transform:rotate(360deg);left:0px; top:0px;}}

@keyframes donghua{ 0%  {width:120px;height:50px;left:0px; top:0px;} 25% {transform:rotate(30deg);left:0px;} 50% {transform:rotate(30deg);left:200px; top:0px;} 75% {transform:rotate(360deg);left:200px;}100% {transform:rotate(360deg);left:0px; top:0px;}}

你写的我倒是看明白了，在25%处定义它在left:0px;就可以不右移。 但我还是很奇怪，即便我没有定义left:0px; ，但我也没有让它右移啊，凭什么它就同时右移了？

@keyframes donghua{ 0%  {width:120px;height:50px;left:0px; top:0px;} 25% {transform:rotate(30deg);left:0px;} 50% {transform:rotate(30deg);left:200px; top:0px;} 75% {transform:rotate(360deg);left:200px;}100% {transform:rotate(360deg);left:0px; top:0px;}}

你写的我倒是看明白了，在25%处定义它在left:0px;就可以不右移。 但我还是很奇怪，即便我没有定义left:0px; ，但我也没有让它右移啊，凭什么它就同时右移了？

@keyframes 本来就可以多个属性同时做动画。每个属性的变化都是独立的

你要求的是时间轴在25%到50%时让left从0变化到200;

可你只在 0% 设置left:0px;， 50% 设置left:200px;
25% 中没有设置left属性。就是25%时不对left影响
这样就是时间轴在0%到50%时让left从0变化到200;