css - 一次滑动一个动画元素？

Question

我试图在页面上一个接一个地滑动一些元素。

基本上，我需要将第一个元素滑入，然后是第二个，然后是第三个等等。

像这样:

这是我目前所拥有的:

https://jsfiddle.net/npvsrkcy/3/

在上面的 fiddle 中，所有元素/图像将同时滑入，这不是我想要的。

这是我的全部代码:

img {
    position: relative;
    margin-left: 0%;
    margin: 1em;
    animation: slide 4s 1;
  width:100%;
}
@keyframes slide {
    from { right: -150%; }
    to { right: 0%; }
}

有人可以就此提出建议吗？

编辑:

好的，因为我试图在动态创建的元素上使用幻灯片动画，所以我不能使用正常的第 nth-child~(number) 场景。

所以我尝试这样做:

img:nth-child(1n+3) {
   -webkit-animation-delay: 0;
   animation-delay: 0;
}

img:nth-child(2n+2) {
   -webkit-animation-delay: 0.2s;
   animation-delay: 0.2s;
}

img:nth-child(3n+3) {
   -webkit-animation-delay: 0.4s;
   animation-delay: 0.4s;
}

但这似乎只适用于前 3 个元素/图像!

这是新的 fiddle :https://jsfiddle.net/npvsrkcy/9/

Answer 1

您可能会尝试利用第 nth-child(number) 选择器来延迟动画，如下所示:

img {
   position: relative;
   margin-left: 0%;
   margin: 1em;
   animation: slide 4s 1;
   width:100%;
   /* Fix the elements being visible before the animation */
   opacity: 0;
   /* After the animation remain visible */
   -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
   animation-fill-mode: forwards;
}

img:nth-child(1) {
   -webkit-animation-delay: 0;
   animation-delay: 0;
}

img:nth-child(2) {
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
}

img:nth-child(3) {
   -webkit-animation-delay: 2s;
   animation-delay: 2s;
}

@keyframes slide {
from { right: -150%; opacity: 0;}
to { right: 0%; opacity: 1; }
}

这会将第二个和第三个图像元素的动画延迟设定的秒数。

希望对您有所帮助!

编辑:刚开始玩 fiddle ，似乎需要对动画进行编辑以防止它们在加载前显示。请允许我想出一个解决办法；编辑 2:通过将 animation-fill-mode 设置为 forwards 并添加不透明效果来修复它。另一种解决方案是将图像放在屏幕外开始。

附言。一些进一步的信息: https://www.w3schools.com/cssref/sel_nth-child.asp