Question

我有一个带有背景图像的方框列表，它们垂直滚动：

@keyframes movie {
   0% { background-position: 50% 5%; }
   50% { background-position: 50% 95%; }
   0% { background-position: 50% 5%; }
}

.movie {
    animation: movie 50s linear infinite;
}

“问题”是这样所有的盒子都有背景同时移动我希望有一个“随机起点”，以便每个方框都有不同的动画。

例如，一个背景向下移动，而另一个背景向上移动。

纯CSS可以吗？我用Javascript找不到简单的方法..

Answer 1

您可以使用负动画延迟。

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

为动画延迟指定负值会导致动画立即开始执行。但是，它会出现已开始在其周期中途执行。例如，如果你指定-1s作为动画延迟时间，动画将开始立即但将在动画序列中开始1秒。

因此，如果您希望动画的开始时间为20％，则动画延迟为（-50s * 20％）。您只需使用javascript创建随机起点。

Answer 2

您可以使用animation-delay。

animation-delay: 10s;

或在你的速记中：

animation: movie 50s linear 10s infinite;

使用一些伪类可能更容易处理：

.movie:nth-of-type(1) {
  animation-delay: 10s;
}

.movie:nth-of-type(2) {
  animation-delay: 20s;
}

.movie:nth-of-type(3) {
  animation-delay: 30s;
}

Answer 3

这可以使用纯CSS完成，无需编写（或通过SCSS等生成），使用以下组合：

更改动画开始时间的负animation-delay
多个nth-child或nth-of-type规则，以应用将随机化＆＃39;规则申请

movie.nth-child(2n) { animation-delay: -10s }  
movie.nth-child(2n+1) { animation-delay: -30s }  
movie.nth-child(3n) { animation-delay: -20s; }  
movie.nth-child(5n) { animation-delay: -40s }  
movie.nth-child(7n) { animation-delay: -15s }  
{etc}

仅使用前2个规则给出交替规则（例如表中的偶数/奇数行）。请注意第二个规则具有+1偏移量 - 如果您的班级（movie）没有适合您要更改的规则的默认值，这一点非常重要（默认情况下为{{{ 1}}）。

使用animation-delay的素数倍的nth-child(n)公式可使有效模式长度等于所有素数因子（例如重复前的n元素）的乘积。

＆＃13;

2*3*5*7 = 210

＆＃13;

li {
  animation: movie 5s linear infinite;
}
@keyframes movie {
  20% { color: white }
  40% { color: black }
}
li:nth-child(2n-1) {
  background-color: lime;
  animation-delay: 1s;
}
li:nth-child(2n) {
  background-color: orange;
  animation-delay: 2s;
}
li:nth-child(3n) {
  background-color: yellow;
  animation-delay: 3s;
}
li:nth-child(5n) {
  background-color: magenta;
  animation-delay: 5s;
}
li:nth-child(7n) {
  background-color: aqua;
}

＆＃13;

对于进一步的随机化，您可以创建第二组规则，其<ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> </ul>倍数/偏移量略有不同，并更改n（或任何其他规则）。

Answer 4

要详细说明Chef answer中的建议，将一堆元素的动画延迟随机化的Javascript可能如下所示：

var elements = document.querySelectorAll('.movie')
var animationDuration = 50000; // in milliseconds

// Set the animationDelay of each element to a random value
// between 0 and animationDuration:
for (var i = 0; i < elements.length; i++) {
  var randomDuration = Math.floor(Math.random() * animationDuration);
  elements[i].style.animationDelay = randomDuration + 'ms';  
}

当然，如果你想对动画延迟使用负值，你可以将randomDuration乘以-1（因此有些元素会在动画中期开始而不是延迟初始动画）。

CSS关键帧动画的随机“起点”

4 个答案: