css - 如何让幻灯片动画改变方向

Posted 2023-03-05

【中文标题】css - 如何让幻灯片动画改变方向

【英文标题】：Css - how to make the slide animation change direction

【发布时间】：2022-01-22 14:13:24

【问题描述】：

对于当前的幻灯片动画，它从右向左滑动，但现在我希望它从左向右滑动。

我该怎么做？

App.js

import "./styles.scss";

import React from "react";

function App() 
  const images = [
     id: 1, imgAlt: "Img 1" ,
     id: 2, imgAlt: "Img 2" ,
     id: 3, imgAlt: "Img 3" ,
     id: 4, imgAlt: "Img 4" ,
     id: 5, imgAlt: "Img 5" ,
     id: 6, imgAlt: "Img 6" ,
     id: 7, imgAlt: "Img 7" 
  ];
  return (
    <section className="slide-option">
      <div id="infinite" className="highway-slider">
        <div className="highway-barrier">
          <ul className="highway-lane">
            images.map((img) => 
              return (
                <li className="highway-car" key=img.id>
                  img.imgAlt
                </li>
              );
            )
            images.map((img) => 
              return (
                <li className="highway-car" key=img.id>
                  img.imgAlt
                </li>
              );
            )
          </ul>
        </div>
      </div>
    </section>
  );


export default App;

styles.scss

.App 
  font-family: sans-serif;
  text-align: center;



$height-slide: 280px;
$height-slide-mobile: 240px;

.slide-option 
  height: $height-slide-mobile;


section 
  display: flex;
  flex-flow: column;
  align-items: center;
  div.container 
    transition: all 0.3s ease;
  

section.slide-option 
  margin: 0;
  .no-marg 
    margin: 0 0 0 0;
  


div.highway-slider 
  display: flex;
  justify-content: center;
  width: 100%;
  height: $height-slide-mobile;
  background-position: center;
  background-repeat: no-repeat;
  div.highway-barrier 
    overflow: hidden;
    position: relative;
  
  ul.highway-lane 
    display: flex;
    height: 100%;
    margin-bottom: 0;
    padding-left: 0;
    padding-inline-start: 0;
    li.highway-car 
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    
  


@keyframes translatestf 
  0% 
    transform: translateX(100%);
  
  100% 
    transform: translateX(-500%);
  

#stffull div.highway-barrier 
  ul.highway-lane 
    width: 500%;
    li.highway-car 
      animation: translatestf 30s linear infinite;
    
  


@keyframes translateinfinite 
  100% 
    transform: translateX(calc(-180px * 12));
  

#infinite div.highway-barrier 
  box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.3);
  &::before,
  &::after 
    content: " ";
    position: absolute;
  

  ul.highway-lane 
    width: calc(180px * 24);
    li.highway-car 
      width: 180px;
      animation: translateinfinite 25s linear infinite;
    
  

代码沙盒https://codesandbox.io/s/cold-glade-thl6n?file=/src/App.js:0-993

【参考方案1】：

反转ul.highway-lane CSS 动画方向。

animation-direction

ul.highway-lane 
  width: calc(180px * 24);
  li.highway-car 
    width: 180px;
    animation: translateinfinite 25s linear infinite reverse; // <-- reverse