您现在的位置: 首页 > 站长学院 > CSS

网页加载时,CSS上移的动画效果控制

来源: 发布时间:2019-09-12 21:42:37热度:IT源码网
网页加载时,CSS上移的动画效果控制,这个效果是如今网页中使用特别多的,找了很多案例,在这里贴出来方便日后使用。

下面直接贴出代码:

1、CSS代码如下
.animate-box {
    opacity: 0
}


@-webkit-keyframes fadeInUp {
from {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0);
-webkit-transform:translate3d(0, 50px, 0);
transform:translate3d(0, 50px, 0)
}
to {
    opacity: 1;
    -webkit-transform: none;
    transform: none
}
}
@keyframes fadeInUp {
from {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0);
-webkit-transform:translate3d(0, 50px, 0);
transform:translate3d(0, 50px, 0)
}
to {
    opacity: 1;
    -webkit-transform: none;
    transform: none
}
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}


2、div代码 加入类即可,如:

<div class="animate-box fadeInUp animated">我需要上移</div>
    责任编辑: