我正在努力在 CSS 中制作线性动画 [重复]

Question

我一直在尝试重现 Apple TV Plus 页面上使用的不同电影和节目的效果，有一种“线性”动画，内容无限，悬停时会变慢。

(https://www.apple.com/apple-tv-plus/)

然而，我使用了一个十年前在代码网站上发布的简单代码，但我认为这不是正确的选择，因为这样，我无法实现真正​​“无限”的效果，例如一旦列表的最后一项到达页面的左边框，它就会重新启动而不是循环。另外，我试图减慢悬停时的动画速度，但它只是在页面上跳转而没有过渡或其他任何情况。我有点迷路并且非常新手，所以我非常感谢任何帮助。

这是我的代码：

@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);      /* position initiale à droite */
  }
  100% {
    transform: translate3d(-100%,0,0);  /* position finale à gauche */
  }
}

article.head-explore {
        overflow: hidden;
        max-width: 100%;
        padding-top: 150px;
        padding-bottom: 40px;
        background-image: -moz-radial-gradient( 50% 50%, circle closest-side, rgb(54,56,63) 0%, rgb(26,29,34) 50%, rgb(0,0,0) 100%);
        background-image: -webkit-radial-gradient( 50% 50%, circle closest-side, rgb(54,56,63) 0%, rgb(26,29,34) 50%, rgb(0,0,0) 100%);
        background-image: -ms-radial-gradient( 50% 50%, circle closest-side, rgb(54,56,63) 0%, rgb(26,29,34) 50%, rgb(0,0,0) 100%);
        background-color: black;
        text-align: center;
    }

            article.head-explore h1 {
                margin-bottom: 150px;
                line-height: 90px;
                font-weight: 600;
                font-size: 80px;
                text-align: center;
            }

            article.head-explore ul.bots-row-1,
            article.head-explore ul.bots-row-2 {
                width: auto;
                display: flex;
                flex-direction: row;
                height: 212px;
                color: black;
                transition: 0.2s all;
            }

            article.head-explore ul.bots-row-1 {
                margin-bottom: 20px;
                animation: defilement-rtl 20s infinite linear;
            }

            article.head-explore ul.bots-row-2 {
                animation: defilement-rtl 30s infinite linear;
                margin-bottom: 40px;
            }
            
                    article.head-explore ul.bots-row-1 li,
                    article.head-explore ul.bots-row-2 li {
                        margin-right: 20px;
                        width: 350px;
                        display: flex;
                        flex-shrink: 0;
                        justify-content: center;
                        align-items: center;
                        background-color: red;
                        border-radius: 30px;
                    }
          
          article.head-explore ul.bots-row-1:hover {
          animation: defilement-rtl 30s infinite linear;
          }
          
          article.head-explore ul.bots-row-2:hover {
          animation: defilement-rtl 40s infinite linear;
          }

    <article class="head-explore">
        <h1>Discover all new<br>opportunities</h1>
        <ul class="bots-row-1">
            <li></li>
            <li></li>
            <li></li>
      <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="bots-row-2">
            <li></li>
            <li></li>
            <li></li>
      <li></li>
            <li></li>
            <li></li>
        </ul>
        <a href="">See full bot list <img src="./arrow.svg"/></a>
    </article>

Answer 1

你不能用 css 动画做你想做的事。在最后一个模块之后，您无法进行“无限”转换“重新加载”内容队列。但是使用轮播/滑块库可能并不困难。

我总是使用slike slider，因为它对我来说是最容易实现、最简单的工作方式之一，但仍有大量选项可以轻松自定义它。

查看我在JSfiddle 中为您制作的示例

但是...如果您想在悬停时操作动画speed，您可能需要使用一些javascript。就在小提琴中是2000。如果将鼠标悬停在滑块上，您可能需要使用具有不同值的变量。