html - 图像在屏幕上滑动 - CSS3

Question

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

谢谢亚当

Answer 1

您可以使用关键帧动画来做到这一点，如下所示：

例子

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