css - 悬停时更改 Css slider 的速度

Question

谁能给我一个关于如何减慢幻灯片显示速度的解决方案？

我遵循以下代码:http://tympanus.net/TipsTricks/FastHoverSlideshow/

这有一个 css slider 属性。我已经尝试更改 animation duration 的属性，例如 0.8s > 5s 但在滑动图像时出现错误。请尽快帮助我。提前致谢。

Answer 1

您必须更改所有 .hs-wrapper img:nth-child 速度，它们也设置为在 0.1 秒后更改

.hs-wrapper img{
    top: 0px;
    left: 0px;
    position: absolute;
    -webkit-animation: showMe 4s linear infinite 0s forwards;
    -moz-animation: showMe 4s linear infinite 0s forwards;
    -o-animation: showMe 4s linear infinite 0s forwards;
    -ms-animation: showMe 4s linear infinite 0s forwards;
    animation: showMe 4s linear infinite 0s forwards;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    -ms-animation-play-state: paused;
    animation-play-state: paused;   
}
.hs-wrapper img:nth-child(1){
    z-index: 9;
}
.hs-wrapper img:nth-child(2){
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    -ms-animation-delay: 0.5s;
    animation-delay: 0.5s;
    z-index: 8;
}
.hs-wrapper img:nth-child(3){
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    -ms-animation-delay: 1s;
    animation-delay: 1s;
    z-index: 7;
}
.hs-wrapper img:nth-child(4){
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    -ms-animation-delay: 1.5s;
    animation-delay: 1.5s;
    z-index: 6;
}
.hs-wrapper img:nth-child(5){
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    -ms-animation-delay: 2s;
    animation-delay: 2s;
    z-index: 5;
}
.hs-wrapper img:nth-child(6){
    -webkit-animation-delay: 2.5s;
    -moz-animation-delay: 2.5s;
    -o-animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    animation-delay: 2.5s;
    z-index: 4;
}
.hs-wrapper img:nth-child(7){
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    -ms-nimation-delay: 3s;
    animation-delay: 3s;
    z-index: 3;
}
.hs-wrapper img:nth-child(8){
    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
    -o-animation-delay: 3.5s;
    -ms-animation-delay: 3.5s;
    animation-delay: 3.5s;
    z-index: 2;
}