更改 CSS 图像幻灯片速度

Question

现在谁能告诉我如何减慢幻灯片的显示时间？我希望所有幻灯片在页面加载时显示的持续时间与第一张幻灯片相同，但在第一张幻灯片之后，它们会很快开始循环。

.wavsplashslider {
    position: relative;
    top: 0;
    left: 0;
    width: 824px;
    height:392px;
    overflow:hidden;
}
.wavsplashslide {
    width: 824px;
    height:392px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: slideshow 12s linear 0s infinite;
    -moz-animation: slideshow 12s linear 0s infinite;
    -ms-animation: slideshow 12s linear 0s infinite;
    -o-animation: slideshow 12s linear 0s infinite;
    animation: slideshow 12s linear 0s infinite;
}
.wavsplashslide:nth-child(2) {
    -webkit-animation: slideshow 12s linear 4s infinite;
    -moz-animation: slideshow 12s linear 4s infinite;
    -ms-animation: slideshow 12s linear 4s infinite;
    -o-animation: slideshow 12s linear 4s infinite;
    animation: slideshow 12s linear 4s infinite;
}
.wavsplashslide:nth-child(3) {
    -webkit-animation: slideshow 12s linear 8s infinite;
    -moz-animation: slideshow 12s linear 8s infinite;
    -ms-animation: slideshow 12s linear 8s infinite;
    -o-animation: slideshow 12s linear 8s infinite;
    animation: slideshow 12s linear 8s infinite;
}
@-webkit-keyframes slideshow {
    25% {
        opacity: 1;
        left: 0;
    }
    33.33% {
        opacity: 0;
        left: -824px;
    }
    91.66% {
        opacity: 0;
        left: -824px;
    }
    100% {
        opacity: 1;
        left: 0
    }
}
@-moz-keyframes slideshow {
    25% {
        opacity: 1;
        left: 0;
    }
    33.33% {
        opacity: 0;
        left: -824px;
    }
    91.66% {
        opacity: 0;
        left: -824px;
    }
    100% {
        opacity: 1;
        left: 0
    }
}
@-ms-keyframes slideshow {
    25% {
        opacity: 1;
        left: 0;
    }
    33.33% {
        opacity: 0;
        left: -824px;
    }
    91.66% {
        opacity: 0;
        left: -824px;
    }
    100% {
        opacity: 1;
        left: 0
    }
}
@-o-keyframes slideshow {
    25% {
        opacity: 1;
        left: 0;
    }
    33.33% {
        opacity: 0;
        left: -824px;
    }
    91.66% {
        opacity: 0;
        left: -824px;
    }
    100% {
        opacity: 1;
        left: 0
    }
}
@keyframes slideshow {
    25% {
        opacity: 1;
        left: 0;
    }
    33.33% {
        opacity: 0;
        left: -824px;
    }
    91.66% {
        opacity: 0;
        left: -824px;
    }
    100% {
        opacity: 1;
        left: 0
    }
}

<div class="wavsplashslider">

    <div class="wavsplashslide">
      <a href="http://stackoverflow.com">
        <img src="http://lorempixel.com/824/392"  />
      </a>
    </div>


    <div class="wavsplashslide">
      <a href="http://stackoverflow.com/questions">
        <img src="http://lorempixel.com/824/392" />
      </a>
    </div>

    <div class="wavsplashslide">
      <a href="http://stackoverflow.com/tags">
        <img src="http://lorempixel.com/824/392" />
      </a>
    </div>

</div>

Answer 1

您应该首先根据（相当）全球支持忘记前缀：仍然需要的唯一前缀是-webkit-（来源：caniuse.com）。您的代码将更具可读性和易于维护。

回答您的问题：您只需为 每张 幻灯片设置一个关键帧，以便每 n 秒设置一次正确的过渡。这样，每张幻灯片都会跟随自己的动画，从 0% 开始，做某事直到 100%，然后结束动画。

让我们看看实际效果

.wavsplashslide:nth-child(1) {
    -webkit-animation: firstcycle 12s linear infinite;
    animation: firstcycle 12s linear infinite;
}

.wavsplashslide:nth-child(2) {
    -webkit-animation: secondcycle 12s linear infinite;
    animation: secondcycle 12s linear infinite;
}

.wavsplashslide:nth-child(3) {
    -webkit-animation: thirdcycle 12s linear infinite;
    animation: thirdcycle 12s linear infinite;
}

@keyframes firstcycle {
    // 0th → 3rd second : nothing happens, image is displayed
    0%, 8.3333% { left: 0; }
    25% { left: 0; opacity: 1; }

    // 3rd → 4th second : the first image will start moving
    33.3333% { left: 824px; opacity: 0; }

    // then we go back in position
    34% { left: -824px; opacity: 0; }

    // 11th → 12th second : we start replacing the third image by the first one
    91.6667% { left: -824px; opacity: 0; }
    100% { left: 0; opacity: 1; }
}

@keyframes secondcycle {
    // 0th → 3rd second : nothing happens, first image is displayed
    0%, 25% { left: -824px; }

    // 3rd → 4th second : the second image is replacing the first one
    33.3333% { left: 0; opacity: 1; }

    // this display lasts until the 7th second
    58.3333% { left: 0; opacity: 1; }

    // 7th → 8th second: the second image start moving
    66.6667% { left: 824px; opacity: 0; }

    // then we go back in position
    67%, 100% { left: -824px; opacity: 0; }
}

@keyframes thirdcycle {
    // 0th → 7th second : nothing happens, second image is displayed
    0%, 58.3333% { left: -824px; }

    // 7th → 8th second: the third image is replacing the second one
    66.6667% { left: 0; opacity: 1;}

    // this display lasts until the 11th second
    91.6667% { left: 0; opacity: 1; }

    // then we can stay here for a while: firstcycle is coming back
    100% { left: 824px; opacity: 0; }
}

这是see that in action and get the whole CSS的小提琴

Answer 2

我真的建议你删除所有这些并使用UnSlider

如果你在这里学习this link 对你来说是完美的