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

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 规则以应用将“随机化”规则应用的公式

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) 没有适合您正在更改的规则的默认值（animation-delay 无论如何默认为 0），这一点很重要。

使用具有n 素数倍数的nth-child(n) 公式使有效模式长度等于所有素因子的乘积（例如重复之前的2*3*5*7 = 210 元素）。

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

<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 倍数/偏移量略有不同，并更改 animation-duration（或任何其他规则）。

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（因此某些元素会在动画中间开始，而不是让它们的初始动画延迟）。