호버에서 CSS 슬라이더의 속도 변경

Question

내 슬라이드의 속도를 늦추는 방법에 대한 해결책을 누군가에게 줄 수 있습니까? 이것은 css 슬라이더 특성을 가지고 http://tympanus.net/TipsTricks/FastHoverSlideshow/

:

나는의 코드를 따르십시오. 이미 animation duration의 속성을 변경하려고 시도했지만 0.8s > 5s과 같은 이미지가 있지만 슬라이딩 오류가 있습니다. 누구나 할 수있는만큼 빨리 나를 도우십시오. 미리 감사드립니다.

Answer 1

당신은 또한 0.1 초 후 변경하도록 설정되어 모든 .hs-wrapper img:nth-child 속도를 변경 근래

.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; 
}