Question

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

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

这样的事情：

这是我到目前为止所做的：

在上面的小提琴中，所有元素/图像将同时滑动，而不是我想要的。

这是我的全部代码：

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

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

修改

好的，因为我试图在动态创建的元素上使用幻灯片动画，所以我无法使用正常的nth-child~（数字）场景。

所以我试着这样做：

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个元素/图像！

这是新的小提琴：https://jsfiddle.net/npvsrkcy/9/

Answer 1

您可能会尝试利用第n个子（数字）选择器来延迟动画，如下所示：

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

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

希望它有所帮助！

编辑：只是用小提琴演奏，似乎需要对动画进行编辑以防止它们在加载前显示。请允许我提出解决方案; 编辑2：通过将动画填充模式设置为向前并添加不透明效果来修复它。另一个解决方案是将图像放在屏幕上以便开始使用。

PS。更多信息： https://www.w3schools.com/cssref/sel_nth-child.asp

Answer 2

你可以试试这个：

    img {
        position: relative;
        margin-left: 0%;
        margin: 1em;
        animation: Aslide 4s 1;
      width:100%;
    }

    img + img {
      animation: Bslide 4s 1;
    }

    img + img + img {
      animation: Cslide 4s 1;
    }

    @keyframes Aslide {
        0% { right: -150%; }
        33.333333% { right: 0%; }
66.666666% { right: 0%;}
        100% { right: 0%;}
    }

    @keyframes Bslide {
        0 { right: -150%; }
        33.333333% { right: -150%; }
        66.666666% { right: 0%;}
        100% { right: 0%;}
    }

    @keyframes Cslide {
        0% {  right: -150%; }
33.333333% { right: -150%; }
        66.666666% { right: -150%; }
        100% { right: 0%;}
    }

Answer 3

延迟每个div的动画（和）默认情况下，为img标记添加填充模式并将正确的值设置为-150％

img {
 position: relative;
 margin-left: 0%;
 margin: 1em;
 animation: slide 4s 1 forwards;
 width:100%;
 right: -150%;
}
img:nth-child(1) {
 animation-delay:0s;
}
img:nth-child(2) {
 animation-delay:1s;
}
img:nth-child(3) {
 animation-delay:2s;
}
@keyframes slide {
 from { right: -150%; }
 to { right: 0%; }
}

一次滑动一个动画元素？

3 个答案: