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