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

Question

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

我该怎么做？

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

Answer 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
  }
}