CSS 3从左过渡处滑入

前端之家收集整理的这篇文章主要介绍了CSS 3从左过渡处滑入前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有跨浏览器的解决方案来产生一个幻灯片转换与CSS只,没有javascript?下面是html内容的示例:
<div>
    <img id="slide" src="http://.../img.jpg />
</div>

解决方法

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

对于浏览器支持http://caniuse.com/

我做了两个快速示例,只是为了告诉你我的意思。

CSS转换(悬停时)

Demo One

相关代码

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

在这种情况下,Im只是从左边的位置转换:-100px;到0;与1s。持续时间。也可以使用transform:translate();

CSS动画

Demo Two

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

同样的原理(Demo一),但动画在2s后自动启动,在这种情况下,我设置了动画填充模式向前,这将持久的结束状态,保持div可见,当动画结束。

就像我说的,两个快速示例,告诉你如何做。

编辑:
有关CSS动画和转换的详细信息,请参阅:

动画

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

过渡

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

希望这有帮助。

原文链接:https://www.f2er.com/css/223724.html

猜你在找的CSS相关文章