使图像从页面侧面滑出然后停止

Question

我正在寻找动画三张图片。我基本上希望他们做这个链接中的图像 - http://dabblet.com/gist/3834617 - 而不是停止然后滑离页面，我只是想让它滑入并停在中间。

第一个将从左侧滑入，第二个将从右侧滑入，而最后一个将从左侧滑入其他两个之下。

我一直在尝试使用关键帧代码中的数字，但没有运气。任何帮助都是极好的。谢谢:)）

<div id"image"><img src="images/fffff.jpg" width="2000" height="352" /></div> 

img { 
position: absolute; 
left: -100%; 
margin: 7em -244px; 
animation: slide 10s infinite; } 

@keyframes slide { 
0% { left: 0%; }
35% { left: 50%; }
85% { left: 50%; }
100% { left: 50%; }

Answer 1

一张图片

Demo

body { overflow: hidden; }
img {
    position: absolute;
    left: 50%;
    margin: 7em -244px;
    animation: slide 4s 1;
}
@keyframes slide {
    from { left: -150%; }
    to { left: 50%; }
}

三张图片

Demo

body { overflow: hidden; }
img {
    position: absolute;
    left: 50%;
    margin: 7em -244px;
    top: 0;
    animation-duration: 4s;
}
#img1{ animation-name: slideTop; }
#img2{ animation-name: slideLeft; }
#img3{ animation-name: slideRight; }
@keyframes slideRight {
    from { left: -150%; }
    to { left: 50%; }
}
@keyframes slideLeft {
    from { left: 200%; }
    to { left: 50%; }
}
@keyframes slideTop {
    from { top: 200%; }
    to { top: 0%; }
}