我如何使用 css 关键帧动画来保持元素动画

Question

我正在尝试使用关键帧制作动画图像这些图像在一个 div 中，设置为 overflow-x: scroll 并且这些图像在行方向上以 flex 显示，所以我想要的是将这些元素移动到左侧，而不是从左侧返回side 我希望它从右侧返回，这就是我尝试过的方法，但是当我这样做关键帧时，它进入 margin-left -100% 然后不是从右侧返回，而是从左侧返回。

/* Slideshow container */

.slideshow {
  border-radius: 4px;
  display: flex;
  overflow-x: scroll;
}

.mySlides {
  cursor: all-scroll;
  position: relative;
  margin: 0 .5rem;
}

.mySlides img {
  width: 50vh;
  border-radius: 4px;
  animation-name: move;
  animation-duration: 5s;
  animation-delay: 5s;
  animation-timing-function: linear;
}

@keyframes move {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: -100%;
  }
  100% {
    margin-left: 0;
  }
}

<div class="slideshow">
  <div class="slideshow-container slide_2">
    <div class="mySlides fade">
      <img src="https://source.unsplash.com/collection/190747/800x600" alt="">
    </div>
  </div>
  <div class="slideshow-container slide_3">
    <div class="mySlides fade">
      <img src="https://source.unsplash.com/collection/190727/800x600" alt="">
    </div>
  </div>
  <div class="slideshow-container slide_4">
    <div class="mySlides fade">
      <img src="https://source.unsplash.com/collection/190747/800x600" alt="">
    </div>
  </div>
  <div class="slideshow-container slide_5">
    <div class="mySlides fade">
      <img src="https://source.unsplash.com/collection/190727/800x600" alt="">
    </div>
  </div>
  <div class="slideshow-container slide_6">
    <div class="mySlides fade">
      <img src="https://source.unsplash.com/collection/190757/800x600" alt="">
    </div>
  </div>
</div>

Answer 1

为了让所有图片都滑动，我们需要将它们包裹在一个容器中，然后我们将使用 transform: translateX 属性.

将这个容器作为一个整体进行动画处理

在关键帧中，translateX(0) 是我们将采取的初始位置 -100% 以便外部容器 slide 隐藏到左侧。现在，要从右开始，我们必须设置 translateX(100%) 并将其带到 0，以便内容从右向左移动。

/* Slideshow container */

.slideshow {
  border-radius: 4px;
  display: flex;
  overflow-x: scroll;
}

.slide {
  display: flex;
  animation: 5s move 5s linear;
}

.mySlides {
  cursor: all-scroll;
  position: relative;
  margin: 0.5rem;
}

.mySlides img {
  width: 50vh;
  border-radius: 4px;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-100%);
  }
  50.01% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

<div class="slideshow">
  <!-- Wrapper container -->
  <div class="slide">
    <div class="slideshow-container slide_2">
      <div class="mySlides fade">
        <img src="https://source.unsplash.com/collection/190747/800x600" alt="">
      </div>
    </div>
    <div class="slideshow-container slide_3">
      <div class="mySlides fade">
        <img src="https://source.unsplash.com/collection/190727/800x600" alt="">
      </div>
    </div>
    <div class="slideshow-container slide_4">
      <div class="mySlides fade">
        <img src="https://source.unsplash.com/collection/190747/800x600" alt="">
      </div>
    </div>
    <div class="slideshow-container slide_5">
      <div class="mySlides fade">
        <img src="https://source.unsplash.com/collection/190727/800x600" alt="">
      </div>
    </div>
    <div class="slideshow-container slide_6">
      <div class="mySlides fade">
        <img src="https://source.unsplash.com/collection/190757/800x600" alt="">
      </div>
    </div>
  </div>
</div>

我如何使用 css 关键帧动画来保持元素动画

how can i keep an element animated using css keyframes animation

html

css

image

animation

slideshow