CSS3 애니메이션의 지연

Question

좋아, 나는 순수한 CSS3 이미지 슬라이드 쇼를 만들려고 노력하고있다. (예, JQuery를 사용하면 더 쉽게 할 수 있습니다.) 브라우저, 크롬에서 작동하지 않아 다른 브라우저의 구문을 아직 추가하지 않았습니다.

내 HTML은

...

  <div class="slide-show"> 
       <img src="pictures/slide-1.jpg" alt="Broken Earth" class="slide-1"/> 
       <img src="pictures/slide-2.jpg" alt="World Map" class="slide-2"/> 
       <img src="pictures/slide-3.jpg" alt="Sunset" class="slide-3"/> 
       <img src="pictures/slide-4.jpg" alt="Ursumian Flag" class="slide-4"/> 
      </div> 

그리고 내 CSS는 ...

.slide-show { 

    border-style: solid; 
    border-width: 3px; 
    border-color: #746d27; 
    overflow: visible; 
    width: 600px; 
    height: 300px; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    top: 30px; 

} 

.slide-1 { 

    position: relative; 
    -webkit-animation-name: one; 
    -webkit-animation-duration: 20s; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-play-state: running; 
    width: 600px; 
    height: 300px; 

} 

.slide-2 { 

    position: relative; 
    -webkit-animation-name: two; 
    -webkit-animation-duration: 20s; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-play-state: running; 
    width: 600px; 
    height: 300px; 

} 

.slide-3 { 

    position: relative; 
    -webkit-animation-name: three; 
    -webkit-animation-duration: 20s; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-play-state: running; 
    width: 600px; 
    height: 300px; 

} 

.slide-4 { 

    position: relative; 
    -webkit-animation-name: four; 
    -webkit-animation-duration: 20s; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-play-state: running; 
    width: 600px; 
    height: 300px; 

} 

@-webkit-keyframes one { 

    0% {left: 0px; top: 0px;} 
    15% {left: 0px; top: 0px;} 
    20% {left: 600px; top: 0px;} 
    21% {left: 600px; top: 300px;} 
    22% {left: -600px; top: 300px;} 
    23% {left: -600px; top: 0px;} 
    95% {left: -600px; top: 0px;} 
    100% {left: 0px; top: 0px;} 

} 

@-webkit-keyframes two { 

    0% {left: -600px; top: -305px;} 
    15% {left: -600px; top: -305px;} 
    20% {left: 0px; top: -305px;} 
    35% {left: 0px; top: -305px;} 
    40% {left: 600px; top: -305px;} 
    41% {left: 600px; top: -5px;} 
    42% {left: -600px; top: -5px;} 
    43% {left: -600px; top: -305px;} 
    100% {left: -600px; top: -305px;} 

} 

@-webkit-keyframes three { 

    0% {left: -600px; top: -610px;} 
    35% {left: -600px; top: -610px;} 
    40% {left: 0px; top: -610px;} 
    55% {left: 0px; top: -610px;} 
    60% {left: 600px; top: -610px;} 
    61% {left: 600px; top: -310px;} 
    62% {left: -600px; top: -310px;} 
    63% {left: -600px; top: -610px;} 
    100% {left: -600px; top: -610px;} 

} 

@-webkit-keyframes four { 

    0% {left: -600px; top: -915px;} 
    55% {left: -600px; top: -915px;} 
    60% {left: 0px; top: -915px;} 
    75% {left: 0px; top: -915px;} 
    80% {left: 600px; top: -915px;} 
    81% {left: 600px; top: -615px;} 
    82% {left: -600px; top: -615px;} 
    83% {left: -600px; top: -915px;} 
    100% {left: -600px; top: -915px;} 

} 

공지 사항의 "슬라이드 쇼"클래스 "오버 플로우"가 "눈에 보이는 설정이 없습니다. " 이것은 모든 이미지가 올바르게 이동하는지 확인할 수 있도록하기 위해서입니다. 그들이 할 때, 그것은 "숨김"으로 바뀔 것입니다. 4 장의 그림이 있으며, 각각 2 초 동안 무대 밖으로/밖으로 움직여야하며, 무대에서 총 3 초를 소비해야합니다. 마지막 슬라이드에서 왜 지연이 있습니까?

Answer 1

만이 데모를 제공 할 수 있습니다, 또한 -webkit-

없이 모든 '스타일'에 대한 또 다른 하나를 추가, -webkit- 사용하지 마십시오?