Question

我为选框效果创建了一个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个元素时动画很慢。

我怎样才能确保它们两者的速度相同？

谢谢！

Answer 1

您正在使用2个DIV（两个块），内容大小不同。为了同时监视元素的输出，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>

OR

.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%;
}

Example...

css动画持续时间与动态元素

1 个答案: