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

Posted 2023-03-06

【中文标题】如何使用 css 关键帧动画保持元素动画

【英文标题】：how can i keep an element animated using css keyframes animation

【发布时间】：2021-09-15 11:11:14

【问题描述】：

我正在尝试使用关键帧制作动画图像 这些图像在一个设置为overflow-x的div中：滚动并且这些图像在行方向上以flex显示，所以我想要的是在左侧移动这些元素而不是从左侧返回我想要的它从右侧返回，这是我尝试过的，但是当我做这样的关键帧时，它进入左边距 -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" >
    </div>
  </div>
  <div class="slideshow-container slide_3">
    <div class="mySlides fade">
      <img src="https://source.unsplash.com/collection/190727/800x600" >
    </div>
  </div>
  <div class="slideshow-container slide_4">
    <div class="mySlides fade">
      <img src="https://source.unsplash.com/collection/190747/800x600" >
    </div>
  </div>
  <div class="slideshow-container slide_5">
    <div class="mySlides fade">
      <img src="https://source.unsplash.com/collection/190727/800x600" >
    </div>
  </div>
  <div class="slideshow-container slide_6">
    <div class="mySlides fade">
      <img src="https://source.unsplash.com/collection/190757/800x600" >
    </div>
  </div>
</div>

【问题讨论】：

我给你做了一个sn-p。请添加来自例如 placeholder.com 的图片，这样我们就有了 minimal reproducible example

@mplungjan 我已经在占位符中添加了图像，您现在可以运行 sn-p

您是否演示了图像应该如何从右侧显示？从右边出来后，应该放在哪里，即最后一张图片的末尾还是回到原来的位置？

不，@samir 我没有。但我想要的是让它们像新闻频道 Tv 底部的信息一样动画化

基本上是从左到右连续移动，对吗？

【参考方案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" >
      </div>
    </div>
    <div class="slideshow-container slide_3">
      <div class="mySlides fade">
        <img src="https://source.unsplash.com/collection/190727/800x600" >
      </div>
    </div>
    <div class="slideshow-container slide_4">
      <div class="mySlides fade">
        <img src="https://source.unsplash.com/collection/190747/800x600" >
      </div>
    </div>
    <div class="slideshow-container slide_5">
      <div class="mySlides fade">
        <img src="https://source.unsplash.com/collection/190727/800x600" >
      </div>
    </div>
    <div class="slideshow-container slide_6">
      <div class="mySlides fade">
        <img src="https://source.unsplash.com/collection/190757/800x600" >
      </div>
    </div>
  </div>
</div>