html页面加载内容从左侧滑入,CSS 3从左过渡处滑入

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

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

CSS转换(悬停时)

相关代码

.wrapper:hover #slide {

transition: 1s;

left: 0;

}

在这种情况下，Im只是从左边的位置转换：-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; }

}

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

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

编辑：

有关CSS动画和转换的详细信息，请参阅：

动画

过渡

希望这有帮助。