如何自动重启 CSS 动画答案

【问题标题】：How to restart a CSS animation automatically如何自动重启 CSS 动画
【发布时间】：2021-12-01 23:38:10
【问题描述】：

我是网页设计的新手，在 CSS 方面遇到了一些问题。实际上，我正在克隆 amazon.com 并创建一个带有滑动动画的滑块，但动画只运行一次。我希望它无限运行。这是我的代码：

HTML - index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/slider.css">
    <title>Amazon-Great Indian Sale</title>
</head>
<body>
    <header>
        <nav>
            <div class="logo">
                <a href="/index.html"><img src="img/logo.svg" alt="logo" width="138px"></a>
            </div>
            <div class="search">
                <input type="text">
                <button>Search</button>
            </div>
            <ul>
                <div class="nav-items">
                    <li><a href="#">Mobiles</a></li>
                    <li><a href="#">Best Sellers</a></li>
                    <li><a href="#">Electronics</a></li>
                    <li><a href="#">Luggage</a></li>
                    <li><a href="#">Fashion</a></li>
                    <li><a href="#">Software</a></li>
                    <li><a href="#">Sports</a></li>
                    <li><a href="#">Hardware</a></li>
                    <li><a href="#">Furnitures</a></li>
                </div>
            </ul>
        </nav>
    </header>
    <main>
        <div class="slider" id="slide">
            <img src="img/slider_img1.jpeg">
            <img src="img/slider_img2.jpg">
            <img src="img/slider_img3.jpg">
            <img src="img/slider_img4.jpg">
        </div>
    </main>
</body>
<script src="js/slider.js"></script>
</html>

CSS - slider.css

.slider{
    display: flex;
    width: 100%;
    height: 37vh;
    overflow: hidden;
}
.slider img{
    min-width: 100%;
    min-height: 100%;
    animation: slide1 1s 2s forwards, slide2 1s 4s forwards, slide3 1s 6s forwards, slide4 1s 8s forwards;
    transform: translate(0%);
}
@keyframes slide1 {
    0%{
        transform: translate(0%);
    }
    100%{
        transform: translate(-100%);
    }
}
@keyframes slide2 {
    0%{
        transform: translate(-100%);
    }
    100%{
        transform: translate(-200%);
    }
}
@keyframes slide3 {
    0%{
        transform: translate(-200%);
    }
    100%{
        transform: translate(-300%);
    }
}
@keyframes slide4 {
    0%{
        transform: translate(-300%);
    }
    100%{
        transform: translate(0%);
    }
}

注意 - 我没有贴出header部分的CSS代码，你可以忽略它。

我试过用 JS 来做这件事，但对我没有用。在此先感谢:)

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/…
@CBore 这种情况我不会工作
为什么不呢？你的滑块甚至是如何工作的，你忽略了向我们展示你的 JavaScript 部分（我假设这也会有一些相关性，基于那个脚本文件名？）请始终提供一个 proper minimal reproducible example 有这样的问题。
@CBore 我没有任何 JavaScript 部分

标签： javascript html css css-animations

【解决方案1】：

您可以使用一个包含多个步骤的动画，而不是多个动画。不仅仅是0% 和100%。这也可以使用infinite 步数

.slider{
    display: flex;
    width: 100%;
    overflow: hidden;
}
.slider img{
    min-width: 100%;
    min-height: 100%;
    animation: slide 8s forwards infinite;
    transform: translate(0%);
}
@keyframes slide {
    0% {
      transform: translate(0%);
    }
    10% { /* wait 10% for delay */
      transform: translate(0%);
    }
    
    25% {
      transform: translate(-100%);
    }
    35% { /* wait 10% for delay */
      transform: translate(-100%);
    }
    
    50% {
      transform: translate(-200%);
    }
    60% { /* wait 10% for delay */
      transform: translate(-200%);
    }
    
    75% {
      transform: translate(-300%);
    }
    85% { /* wait 10% for delay */
      transform: translate(-300%);
    }
    
    100% {
      transform: translate(0%);
    }
}

<main>
    <div class="slider" id="slide">
        <img src="//picsum.photos/500/250?c=1" width="500" height="250">
        <img src="//picsum.photos/500/250?c=2" width="500" height="250">
        <img src="//picsum.photos/500/250?c=3" width="500" height="250">
        <img src="//picsum.photos/500/250?c=4" width="500" height="250">
    </div>
</main>

【讨论】：

@Reyno 非常感谢。从我陷入困境的两天开始，你就帮助了我。这就是我喜欢stackoverflow的原因。再次感谢；）

【解决方案2】：

您可以使用infinite 关键字来永久制作动画循环：https://developer.mozilla.org/fr/docs/Web/CSS/animation。

【讨论】：

我在一个中添加了多个动画，所以在这种情况下它不起作用

【解决方案3】：

只需将infinite 添加到您的animation 属性或在新行中添加animation-iteration-count: infinite;。

例子：

animation: animation-name 450ms linear infinite;
/* or */
animation-iteration-count: infinite;

文档：https://developer.mozilla.org/en/docs/Web/CSS/animation。

【讨论】：