CSS3動畫中的延遲

好吧，我正在嘗試製作純粹的CSS3圖片幻燈片。（是的，我知道使用JQuery可以更簡單。）我無法在瀏覽器中使用它，因此我還沒有爲其他瀏覽器添加語法。CSS3動畫中的延遲

我的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秒時間坐在舞臺上。爲什麼我在上一張幻燈片中有滯後？

來源

2013-01-07 Allenph

你能添加一個鏈接到頁面嗎？ – Fabio

不要只用-webkit-，再添一爲每一個「風格」，不-webkit-

此外，您還可以提供一個演示？

來源

2013-01-07 08:18:42 user1254290

http://testportfolio.bugs3.com/ 將它放在測試服務器上。我知道關於「-webkit-」的東西。我只是試圖讓它工作，然後再添加更多的代碼，並使其更容易混淆。 – Allenph

它不落在我的身上，哪一部分我應該看到滯後？ – user1254290

第一張幻燈片沒有及時返回原始位置。不知何故，我的時機錯了。它應該是一個無縫循環的圖片。 – Allenph

CSS3動畫中的延遲

回答

相關問題