动画完成后有没有办法改变背景图像？

Question

我想创建一个 CSS 动画，其中一个图像从屏幕左侧滑到右侧，但我有 5 个应该交替的图像。所以首先，image1 从左向右滑动，然后是 image2，然后是 image3，等等。最后，当 image5 完成时，动画应该回到 image1，并且它应该像这样无限循环。有什么方法可以在 CSS 中实现这一点？

Answer 1

您可以单独为每个图像设置动画，但使用相同的动画。然后每个图像可以delayed 不同的数量，例如：

<div class = "slider" style = "--delay:0s"><img src = "1.jpg" /></div>
<div class = "slider" style = "--delay:1s"><img src = "1.jpg" /></div>
<div class = "slider" style = "--delay:2s"><img src = "1.jpg" /></div>
<div class = "slider" style = "--delay:3s"><img src = "1.jpg" /></div>
<div class = "slider" style = "--delay:4s"><img src = "1.jpg" /></div>

.slider{
    animation-name: slideLR;
    animation-duration:1s;
    animation-delay: var(--delay, 0s);
}

@keyframes slideLR{
    from{ /* your initial state before sliding in */ }
    to{ /* your end state after sliding */ }
}

还有其他属性，例如 animation-iteration-count 和 animation-fill-mode，您必须使用它们才能使循环正常工作。

Answer 2

这是一种选框，但带有图像而不是文本。

这样做的一种（简单的）方法是在一个容器中放置两组五个图像，这样可以很容易地更改图像的数量而无需重做任何计算。在每个动画上只翻译 50%，它就会回到初始位置，但没有任何抖动，因为下半部分显示在下面，而且也是从第一个 img 开始的。

这意味着您不必担心填充模式或延迟时间。

此 sn-p 将 img 的数量和所需的宽度设置为 CSS 变量，以便更轻松地更改它们。

* {
  padding: 0;
  margin: 0;
  }
body {
  overflow-x: hidden;
}
div {
  --n: 5; /* number of images */
  --w: 25vw; /* width of an image */
  width: calc(var(--n) * var(--w) * 2);
  animation: animate 10s infinite linear;
  overflow-x: hidden;
  }
  @keyframes animate {
  0% {
    transform: translateX(-50%);
    }
  100% {
    transform: translateX(0);
  }
  }
img {
  width: var(--w);
  height: auto;
  display: inline-block;
}

<div>
<img src="https://picsum.photos/id/1004/300/200"/><img src="https://picsum.photos/id/1005/300/200"/><img src="https://picsum.photos/id/1001/300/200"/><img src="https://picsum.photos/id/1002/300/200"/><img src="https://picsum.photos/id/1003/300/200"/><img src="https://picsum.photos/id/1004/300/200"/><img src="https://picsum.photos/id/1005/300/200"/><img src="https://picsum.photos/id/1001/300/200"/><img src="https://picsum.photos/id/1002/300/200"/><img src="https://picsum.photos/id/1003/300/200"/>
</div>