마지막 이미지 슬라이드가 너무 빠름

css를 사용하는 html로 된 슬라이드입니다. 그러나 마지막 이미지로 슬라이드하면 (마지막 이미지의 지속 시간이 너무 짧음), 너무 빨리지나갑니다. 나머지 모든 이미지는 괜찮습니다.마지막 이미지 슬라이드가 너무 빠름

<div id="slider" style="text-align: center"> 
<figure> 
<img src="pics/img01.png"> 
<img src="pics/img02.png"> 
<img src="pics/img03.png"> 
<img src="pics/img04.png"> 
<img src="pics/img05.png"> 
</figure></div>

이 CSS의 일부입니다 :

@keyframes slidy{ 
0%{left: 0%;} 
20%{left: 0%;} 
35%{left: -100%;} 
45%{left: -150%;} 
55%{left: -200%;} 
65%{left: -250%;} 
75%{left: -300%;} 
95%{left: -350%;} 
100%{left: -400%;} 
} 
body { margin: 100px left; } 
div#slider { overflow: hidden; } 
div#slider figure img { width: 20%; float: left; } 
div#slider figure { 
    position: relative; 
    width: 500%; 
    margin: 0; 
    left: 0; 
    text-align: left; 
    font-size: 0; 
    animation: 30s slidy infinite; 
}

출처

2016-09-16 Mohamed Lee

가 해결되는지 알려주세요 첫 번째 이미지는 괜찮지 만 표시되는 마지막 이미지의 지속 시간이 너무 짧습니다. –

처음 네 개의 이미지가 전환 효과의 절반에 고착되어 마지막 이미지 만 제대로 작동합니다. 음수 값을 사용하지 말고 전환 및 애니메이션 효과를 사용하십시오. –

업데이트에 대한 내 대답을 확인하십시오. 지금은 매우 원활하게 실행됩니다. [Codepen] (http://codepen.io/PleaseBugMeNot/pen/zKBoap). 잠시 설명을 해줄 것입니다. –

그래, 나는 슬라이드 쇼 문제를 해결 여기

은 HTML 부분입니다. 매우 원활하게 실행됩니다. codepen here을 확인하십시오.

CSS 슬라이더에 대한 중요한 점은 width & 주어진 너비 내에서 다른 슬라이드를 슬라이드하는 방식입니다. 그것의 모든 너비 사이의 균형을 유지에 대한 & 너비를 커버의 한주기를 완료하는 데 걸리는 시간.

귀하의 경우에는 5 개의 이미지가 있지만 @ 키 프레임을 너무 많은 레벨로 나눕니다 (레벨은 각 이미지의 너비에 따라 다릅니다).

아래 그림과 같이 나는 &이 @keyframes 깨진 어떻게 작동하는지 보여주는 이미지를 포함했다 :

이

@keyframes slidy{ 
    0%{left: 0%;} 
    25%{left: -100%;} 
    50%{left: -200%;} 
    75%{left: -300%;} 
    100%{left: -400%;} 
}

확인 this codepen & 그것은 그것의 더 "깜박"에 같은 문제

출처

2016-09-16 13:50:53

마지막 이미지 슬라이드가 너무 빠름

답변

관련 문제