CSS：將圖像一個接一個地動畫並滑動到屏幕上？

Question

我試圖使用CSS將圖像從右到左依次設置爲動畫和幻燈片。

但是，我似乎無法實現這一點。

圖像只是在同一時間全部出現，沒有任何幻燈片動畫。

這裏是我的jsfiddle：

https://jsfiddle.net/npvsrkcy/

而且我整個的CSS代碼：

img { 
    position: relative; 
    margin-left: 0%; 
    margin: 1em; 
    animation: slide 4s 1; 
    width:100%; 
} 
@keyframes slide { 
    from { right: -150%; } 
    to { left: 0%; } 
} 

基本上我需要實現一個流暢的動畫效果。

可能有人請告知這個嗎？

我可以通過jQuery做到這一點，但那不是我之後的幻燈片動畫，它看起來也不像CSS動畫那樣流暢。

這是jQuery的工作版本：http://jsfiddle.net/RSk7n/95/

Answer 1

@keyframes slide { 
    from { right: -150%; } 
    to { right: 0%; } 
}