CSS 滑块使用 `transform:translateX` 循环浏览图像

Question

当使用 Transform 属性对两个图像进行动画处理时，是否可以让 CSS 滑块循环浏览两个图像translateX？

我面临几个问题：

1. 我似乎无法显示第二个图像，即使它在 HTML 中，除非我使用position: absolute，然后它对overflow: hidden父级不起作用？

2. 如何重置第一张图像以返回到开头以重新开始？

注：动画速记中，动画持续2.5秒，初始延迟3秒。

我只想对属性执行此操作，translateX因为我想要 60FPS 的平滑度（完成后将完成translate3d，但为了使代码更易于阅读，我使用了 translateX）。我不想动画margin: left或left财产等。

任何帮助都会很棒。

代码如下或链接到 Codepen：https ://codepen.io/anna_paul/pen/ZEJrvRp

body {
  position: relative;
  margin: 0;
  display: flex;
  justify-content: center;
}

.container {
  width: 500px;
  height: 333px;
  overflow: hidden;
}

.slider-wrapper {
  display: flex;
}

.image {
  display: block;
}

.hero-image-1 {
  transform: translateX(0);
  animation: slide-out-image-1 2.5s 3s cubic-bezier(0.54, 0.12, 0.44, 1)
    forwards;
}

@keyframes slide-out-image-1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.hero-image-2 {
  transform: translateX(100%);
  animation: slide-in-image-2 2.5s 3s cubic-bezier(0.54, 0.12, 0.44, 1) forwards;
}

@keyframes slide-in-image-2 {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

<div class="container">
  <div class="slider-wrapper">
    <picture>
      <img class="image hero-image-1" src="https://drive.google.com/uc?export=view&id=1l7cTX35wqd-4eYvFL8A5QLZ7LbOF9m4J">
    </picture>
    <picture>
      <img class="image hero-image-2" src="https://drive.google.com/uc?export=view&id=1iB9R1aoeYSmkPX9Ju3NNOZhKylOjCA0y">
    </picture>
  </div>
</div>

Answer 1

要创建滑块循环，您需要定义滑块移动和停止时的动画点。在你的情况下看起来是这样

2.5s + 3s +2.5s +3s = 11s或移动 + 暂停（离开容器）+ 移动 + 暂停 = 总计。

对于第一张图像，我们需要以动画方式离开容器，然后移动到起始位置（在容器外），等待（第二张图像动画），然后以动画方式移动到初始位置并暂停。

对于第二张图片，我们只是显示然后隐藏。

body {
  height: 100vh;
  background-color: hsl(201, 27%, 10%);
  color: white;
  display: grid;
  place-items: center;
  position: relative;
}

:root {
  --animate: 2.5s;
  --pause: 3s;
  --totall-duration: calc(var(--animate) * 2 + var(--pause) * 2);
}

.container {
  width: 500px;
  height: 333px;
  overflow: hidden;
}

.slider-wrapper {
  width: 200%;
  display: flex;
  position: relative;
}

.image {
  display: flex;
  width: 100%;
  height: 100%;
}

.hero-image-1 {
  top: 0;
  left: 0;
  position: absolute;
  animation: slide-out-image-1 var(--totall-duration) 3s
    cubic-bezier(0.54, 0.12, 0.44, 1) infinite;
}
/* start + pause + start + pause = totall */
/* 2.5s + 3s + 2.5s + 3s = 11s*/
@keyframes slide-out-image-1 {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-100%);
  }
  25.0001% {
    transform: translateX(100%);
  }
  50% {
    transform: translateX(100%);
  }
  75% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(0%);
  }
}

.hero-image-2 {
  top: 0;
  right: 0;
  position: absolute;
  animation: slide-in-image-2 var(--totall-duration) 3s
    cubic-bezier(0.54, 0.12, 0.44, 1) infinite;
}

/* start + pause + start + pause = totall */
/* 2.5s + 3s + 2.5s + 3s = 11s*/
@keyframes slide-in-image-2 {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(-100%);
  }
  75% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-200%);
  }
}

<div class="container">
  <div class="slider-wrapper">
    <picture class="hero-image-1">
      <img class="image" src="https://drive.google.com/uc?export=view&id=1l7cTX35wqd-4eYvFL8A5QLZ7LbOF9m4J" />
    </picture>
    <picture class="hero-image-2">
      <img class="image" src="https://drive.google.com/uc?export=view&id=1iB9R1aoeYSmkPX9Ju3NNOZhKylOjCA0y" />
    </picture>
  </div>
</div>