我正在努力在CSS中制作线性动画

问题描述

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

（https://www.apple.com/apple-tv-plus/）

但是，我使用了十年前在代码网站上发布的简单代码，但我认为这不是正确的选择，因为那样，我还无法实现真正​​的“无限”效果，例如一旦列表的最后一项到达页面的左边界，它将重新启动而不是执行其循环。另外，我尝试使悬停时的动画速度变慢，但是它只是跳到页面上而没有过渡或任何改变。我有点迷茫，而且是个新手，所以我将非常感谢您提供的任何帮助。

这是我的代码：

@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0);      /* position initiale à droite */
  }
  100% {
    transform: translate3d(-100%,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) 100%);
        background-image: -webkit-radial-gradient( 50% 50%,0) 100%);
        background-image: -ms-radial-gradient( 50% 50%,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>

解决方法

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

我一直使用slike slider，因为对我来说，它是最容易实现的工具之一，易于实现，但仍有很多选项可以轻松自定义。

检查我在此JSfiddle

中为您制作的示例

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