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

来源：懂视网责编：小采时间：2020-11-27 16:37:10

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

关于@keyframes定义动画的问题_html/css_WEB-ITnose:我想让一个长方形先转30度，再向右走200px距离，然后再转330度，最后走回原位。（代码不考虑兼容性） div { position:relative; background-color:red; width:120px; height:50px; animation:donghua 5s; an

推荐度：

点击下载本文 文档为doc格式

导读关于@keyframes定义动画的问题_html/css_WEB-ITnose:我想让一个长方形先转30度，再向右走200px距离，然后再转330度，最后走回原位。（代码不考虑兼容性） div { position:relative; background-color:red; width:120px; height:50px; animation:donghua 5s; an

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

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

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

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

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推荐度：

点击下载本文 文档为doc格式

标签：定义动画 html

热门焦点

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

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

回复讨论(解决方案)

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

最新推荐

猜你喜欢

热门推荐