如何自动重新启动 CSS 动画

Question

我是网页设计的新手，在 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 来做这个，但它对我不起作用。提前致谢:)

Answer 1

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

Answer 2

您可以使用包含多个步骤的单个动画来代替多个动画。不只是 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>

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

如何自动重新启动 CSS 动画

How to restart a CSS animation automatically

html

javascript

css

css-animations