您可以使用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动画和过渡的详细信息，请参见：
希望这会有所帮助。
