Javascript “随机”；“起点”；用于CSS关键帧动画

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

@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的简单方法。

您可以使用

动画延迟

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

---

您可以使用负动画延迟。

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

---

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

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

• 负

  动画延迟

  ，以更改动画的开始时间
• 多个

  n个子项

  或

  n个类型

  规则应用将“随机”规则应用的公式

movie.nth子（2n）{动画延迟：-10s}
第n个子（2n+1）{动画延迟：-30s}
第n个孩子（3n）{动画延迟：-20s；}
第n个孩子（5n）{动画延迟：-40s}
第n个孩子（7n）{动画延迟：-15s}
{etc}

仅使用前两条规则即可给出交替规则（例如，表中的偶数行/奇数行）。请注意第二条规则，它有一个

+1

偏移量-如果您的类（

movie

）没有一个适当的默认值用于您正在更改的规则（默认情况下，

动画延迟为0

）

使用具有素数倍数的第n个子（n）公式使有效模式长度等于所有素数因子的乘积（例如重复之前的

2*3*5*7=210

）

li{
动画：电影5s线性无限；
}
@关键帧电影{
20%{颜色：白色}
40%{颜色：黑色}
}
李：第n个孩子（2n-1）{
背景色：石灰；
动画延迟：1s；
}
李：第n个孩子（2n）{
背景颜色：橙色；
动画延迟：2s；
}
李：第n个孩子（3n）{
背景颜色：黄色；
动画延迟：3s；
}
李：第n个孩子（5n）{
背景色：洋红色；
动画延迟：5s；
}
李：第n个孩子（7n）{
背景色：浅绿色；
}

0
一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
十一,
十二,
十三,

为了详细说明Chef's中的建议，在一组元素上随机设置动画延迟的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';  
}

var elements=document.querySelectorAll（“.movie”）
var animationDuration=50000；//以毫秒计
//将每个元素的animationDelay设置为随机值
//介于0和animationDuration之间：
对于（var i=0；i

---

当然，如果希望动画延迟使用负值，可以将

randomDuration

乘以-1（因此某些元素会在动画中期启动，而不是延迟初始动画）。

谢谢，但这样动画将以延迟开始，不在不同的起点上。也可以根据CSS变量来确定动画延迟值，并从JS中随机更新该基本值，以获得更动态的效果。看见