web前端|html教程
关于@keyframes定义动画的问题
web前端-html教程
我想让一个长方形先转30度，再向右走200px距离，然后再转330度，最后走回原位。（代码不考虑兼容性）
vb源码 授权,Ubuntu窗口超级大,服务器上tomcat启动慢,网站爬虫工具下载,php开发主要能做什么,渗透力seolzw
div
{
position:relative;
background-color:red;
width:120px;
height:50px;
animation:donghua 5s;
animation-timing-function:linear;
}
@keyframes donghua
{
0% {width:120px;height:50px;left:0px; top:0px;}
25% {transform:rotate(30deg);}
50% {left:200px; top:0px;}
75% {transform:rotate(330deg);}
100% {left:0px; top:0px;}
}
微信怎么网站源码下载,平板安装ubuntu系统,爬虫商学院,php第三方登陆数据表,绍兴seo推荐lzw
牛牛php源码,vscode索引插件,UBUNTU官网买ipad,tomcat.7,sqlite 保存数组,云服务器可以用来上网么,jquery 日历插件 便签,前端框架演变视频,爬虫main,设计学php,山东seo外包公司,展示型网站模板代码,网页菜单功能,如何修改模板网站,ie6页面缩放,办公管理系统有哪些,hao123导航程序lzw
运行的时候不是按我想的步骤来的，而是：转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;
如果觉得《关于@keyframes定义动画的问题【HTML】》对你有帮助，请点赞、收藏，并留下你的观点哦！
