如何使距離爲HTML5

Question

動態圖像這是我的嘗試：

CSS代碼：

body { 
    margin: 0; 
    padding: 0; 
} 
#slideshow { 
    position: relative; 
    overflow: hidden; 
    height: 100px; 
} 
#animate-area { 
    height: 100%; 
    width: 2538px; 
    position: absolute; 
    left: 0; 
    top: 0; 

    background-image: url('http://s10.postimg.org/noxw294zd/banner.png'); 
    animation: animatedBackground 40s linear infinite; 
    -ms-animation: animatedBackground 40s linear infinite; 
    -moz-animation: animatedBackground 40s linear infinite; 
    -webkit-animation: animatedBackground 40s linear infinite; 
} 
/* Put your css in here */ 
@keyframes animatedBackground { 
    from { left: 0; } 
    to { left: -1269px; } 
} 
@-webkit-keyframes animatedBackground { 
    from { left: 0; } 
    to { left: -1269px; } 
} 
@-moz-keyframes animatedBackground { 
    from { left: 0; } 
    to { left: -1269px; } 
} 

現在我需要什麼，每一次旋轉完成，然後再開始從右側移動剩下。每完成一次旋轉我都需要一段距離。

有人可以幫助解決這個問題嗎？

在此先感謝。

http://jsfiddle.net/6d6xa65n/4/

Answer 1

沒有比動畫延遲，這在開始時使用CSS3其他迭代之間的任何延遲，但是你可以使用jQuery延遲。對於從右到左的變化方向：

animation: animatedBackground 40s linear infinite alternate; 
-ms-animation: animatedBackground 40s linear infinite alternate; 
-moz-animation: animatedBackground 40s linear infinite alternate; 
-webkit-animation: animatedBackground 40s linear infinite alternate; 

如果你想改變延遲添加到：

animation: animatedBackground 40s 5s linear infinite alternate; 
-ms-animation: animatedBackground 40s 5s linear infinite alternate; 
-moz-animation: animatedBackground 40s 5s linear infinite alternate; 
-webkit-animation: animatedBackground 40s 5s linear infinite alternate; 

或者添加這個，它會給你在最後的延遲並開始，如果你的意思是延遲通過「距離」：

background-image: url('http://s10.postimg.org/noxw294zd/banner.png'); 
    animation: animatedBackground 5s linear infinite alternate; 
    -ms-animation: animatedBackground 5s linear infinite alternate; 
    -moz-animation: animatedBackground 5s linear infinite alternate; 
    -webkit-animation: animatedBackground 5s linear infinite alternate; 
} 
/* Put your css in here */ 
@keyframes animatedBackground { 
    0% { left: 0; } 
    25% { left: 0; } 
    50% {left: -2000px;} 
    100% { left: -2000px; } 
} 
@-webkit-keyframes animatedBackground { 
    0% { left: 0; } 
    25% { left: 0; } 
    50% {left: -2000px;} 
    100% { left: -2000px; } 
} 
@-moz-keyframes animatedBackground { 
    0% { left: 0; } 
    25% { left: 0; } 
    50% {left: -2000px;} 
    100% { left: -2000px; } 
}