屏幕上的图像滑动 - CSS3

Question

有谁知道我在哪里可以找到一个从屏幕左侧滑入的图像示例，在屏幕中间停留几秒钟，然后继续穿过页面。

由于 亚当

Answer 1

您可以使用keyframe animations执行此操作，如下所示：

example

<强> HTML ：

<img src='image.jpg'>

<强> CSS ：

body { overflow: hidden; }
img {
    position: absolute;
    left: -100%;
    margin: 7em -244px;
    animation: slide 4s infinite;
}
@keyframes slide {
    0% { left: -150%; }
    35% { left: 50%; }
    65% { left: 50%; }
    100% { left: 150%; }
}