我为选取框效果创建了一个 css 动画。 如果选取框列表中有 1 个元素或有 100 个元素,我希望动画速度相同。
我的 CSS 是:
.marquee {
-webkit-animation-name: movement-smooth-up;
animation-name: movement-smooth-up;
-webkit-animation-duration: 10s;
animation-duration: 10s;
}
@-webkit-keyframes movement-smooth-up {
from {
-webkit-transform: translateY(20%);
transform: translateY(20%);
top: 0%;
}
to {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
top: 100%;
}
}
我创建了一个演示 here
如您所见,当我有 10 个元素时,动画很快,而当我有 2 个元素时,动画很慢。
我怎样才能确保它们的速度相同?
谢谢!
最佳答案
您正在使用 2 个 DIV(两个 block )并且内容具有不同的大小。为了同时监视元素的输出,CSS 降低了 2 个“TEXT”的速率。做一个测试,在两边留下相同数量的“TEXT”,它们将以相同的速度运行,或者改变DIV的排列。
同样的速度:
<div class="marquee" style="float:left">
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
</div>
<div class="marquee" style="float:right">
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
<div>TEXT</div>
</div>
或
.marquee {
-webkit-animation-name: movement-smooth-up;
animation-name: movement-smooth-up;
-webkit-animation-duration: 10s;
animation-duration: 10s;
height:180px;
}
或更改父元素的高度。
html, body {margin:0;padding:0;height:100%;}
.marquee {
-webkit-animation-name: movement-smooth-up;
animation-name: movement-smooth-up;
-webkit-animation-duration: 10s;
animation-duration: 10s;
height:100%;
}
关于具有动态元素的CSS动画持续时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33702254/