关于@keyframes定义动画的问题_html/css_WEB-ITnose-html教程-PHP中文网

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

php中文网

发布： 2016-06-21 08:57:13

原创

1538人浏览过

我想让一个长方形先转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;

大家都在看：

html滚动条出现条件怎么控制_html滚动条显示与隐藏逻辑设置如何给html 滚轮_HTML滚轮事件（wheel）监听与页面滚动控制方法 html本地缓存文件怎么删除_html本地缓存文件删除的详细教程 html文件缓存怎么去掉_html文件缓存去除的有效方法外部CSS怎么嵌入到HTML中_外部CSS嵌入到HTML中的操作指南