javascript - 使用 CSS 关键帧、动画和反应在容器 div 内水平滑动图像

Question

有人可以向我解释如何使用 react 和 CSS 关键帧实现多个图像的水平旋转吗？我想完全实现我在 styled-components 网站主页上看到的内容。https://styled-components.com/。您可以看到图像在 x 轴上作为无限循环移动的流畅程度。

const AnimatedElement = () => {
 return <>
  <div className='container'>
   <div className='animated-element' >
    <img src={img1} />
    <img src={img1} />
    <img src={img1} />
   </div>
  <div>
 </>
}

export default AnimatedElement

css:
 .container{
   max-width: 1100px;
   padding: 0;
   margin: 0 auto;
 }
 .animated-element{
   display: grid;
   grid-template-columns: repeat(3, max-content);
   align-items: center;
   justify-content: space-between;
   animation: horizontal-loop linear 3s infinite;
}


@keyframes horizontal-loop {
  0{
     transform: translateX(0)
   }
  100%{
     transform: translateX(100)
   }
}

标签： javascriptcssreactjsanimation