CSS 3从左侧过渡插入

Question

是否有一个跨浏览器解决方案仅使用CSS而不使用javascript来生成幻灯片过渡？以下是html内容的示例：

<div>
    <img id="slide" src="http://.../img.jpg />
</div>

Answer 1

您可以使用CSS3过渡或CSS3动画在元素中滑动。

我举了两个简单的例子，只是为了向您展示我的意思。

CSS过渡（悬停时）

相关代码

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}

在这种情况下，我只是将位置从left: -100px;转换0;为1s。持续时间。也可以使用transform: translate();

CSS动画

#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

与上面的原理相同（演示一），但是动画在2秒后自动开始，在这种情况下，我将设置animation-fill- mode为forwards，它将保持结束状态，并在动画结束时保持div可见。

就像我说的，有两个简单的示例向您展示如何实现。

编辑： 有关CSS动画和过渡的详细信息，请参见：

希望这会有所帮助。