CSS3实现首屏元素滑入动效

首屏滑入动效可以参看我的个人主页

代码如下

@-webkit-keyframes huaru01{
 0% {
 opacity:0;
 -webkit-transform:translate3d(0, -100%, 0);
 transform:translate3d(0, -100%, 0);
 }
 100% {
 opacity:1;
 -webkit-transform:none;
 transform:none;
 }
}
@-webkit-keyframes huaru00{
 0% {
 opacity:0;
 }
 100% {
 opacity:0;
 }
}
h2.dh001{
 -webkit-animation: huaru00 0.4s 0s,huaru01 1s 0.4s ease-out;
}

利用animation属性来实现动画，

1.首先动画huaru00先执行，效果为先将目标元素隐藏，延时0秒触发，持续时间为0.4秒。

2.然后动画huaru01延时04秒触发，动画过程1秒，其效果为现实从隐藏且顶部向原位置滑动且不透明度变成1。

这样一来就实现了打开网页，某元素从隐藏到滑入预计位置且完全显示的效果了。

未经允许不得转载：安超峰的网站 » CSS3实现首屏元素滑入动效