html - 更改 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 的 fiddle