我想让一个长方形先转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;
本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源：php中文网
如果觉得《html keyframes无效 关于@keyframes定义动画的问题_html/css_WEB-ITnose》对你有帮助，请点赞、收藏，并留下你的观点哦！
