为什么一个Div的动画效果比另一个快
为什么一个Div的动画效果比另一个快
提问于 2014-04-20 23:45:42
使用关键帧动画，id为"Second“的div在"first”div开始之前稍有动画效果。这是我的代码，它们在默认情况下不应该以相同的速度移动吗？任何帮助都是非常感谢的。
body { background-color: black; color: white;}
#First { width: 200px;
height: 50px;
position: absolute;
top:5px;
color: black;
text-align: center;
background-color: yellow;
-webkit-transform-origin: top;
-webkit-animation: myfirst 1s;
-webkit-transform:rotateX(90deg);
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes myfirst
{
0% {-webkit-transform:rotateX(0deg);}
100% {-webkit-transform:rotateX(90deg);}
}
#Second { width: 200px;
height: 50px;
position: absolute;
top:5px;
left:200px;
color: black;
text-align: center;
background-color: green;
-webkit-transform-origin: bottom;
-webkit-animation: mysecond 1s;
-webkit-transform:rotateX(0deg);
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes mysecond
{
0% {-webkit-transform:rotateX(90deg);}
100% {-webkit-transform:rotateX(0deg);}
}和HTML，
<div id="First">FIRST</div>
<div id="Second">SECOND</div>jsfiddle上的代码：http://jsfiddle.net/x3p64/
回答 1
Stack Overflow用户
发布于 2014-04-20 23:53:57
这并不是说它以前就开始了，只是因为它的宽松属性而看起来很像。这两个动画同时开始和停止，只是看起来不同而已。尝试在这两种情况下都使用linear easing。
-webkit-animation: mysecond 1s linear;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23184367
复制相关文章
相似问题
腾讯云开发者
