css打开从左滑入 |css ie7兼容 透明

下面大家来看一下如何实现打开从左滑入的效果：

/*设置元素的初始状态*/
.slideInLeft{
opacity: 0;/*透明度为0*/
transform: translateX(-100%);/*向左平移100%*/
}
/*设置元素进入的状态*/
.slideInLeft.active{
opacity: 1;/*透明度为1*/
transform: translateX(0);/*不再平移*/
transition: all .5s;/*过渡时间0.5秒*/
}

可以看到，大家并没有过多的使用复杂的动画效果，只是利用了CSS3中的transform和transition属性，而且代码也十分的简单易懂。

最后需要注意的是，大家需要在元素加载完成后再添加active类名，否则无法触发动画效果。