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%; } 
}