html实现类似app的欢迎页,css3动画代替js脚本实现欢迎页面动画

1.使用脚本操作dom元素

在页面加载时，使用js控制dom的animationsetTimeout(function() {

$('.welcome').fadeOut(1000)

}, 5000)

setTimeout(function() {

$('.painted-scroll').css({            'display': 'block'

})

$('.painted-scroll').find('span').animate({            'left': '820px'

})

}, 5000)

setTimeout(function() {

$('.painted-scroll').fadeOut(1000)

}, 13000)

2.使用css3的animation实现

两个动画通过动画延时属性，实现连续加载/*小鱼*/

.welcome {        background: rgba(255, 255, 255, 1);        -webkit-animation: welcomeAnimation 5s linear;        -moz-animation: welcomeAnimation 5s linear;        -o-animation: welcomeAnimation 5s linear;        -ms-animation: welcomeAnimation 5s linear;        animation: welcomeAnimation 5s linear;        -webkit-animation-fill-mode: forwards;        animation-fill-mode: forwards;

}

@keyframes welcomeAnimation {

0% {            opacity: 1;            visibility: visible;            -webkit-animation-timing-function: ease-in;

}

50% {            opacity: 1;            visibility: visible;            -webkit-animation-timing-function: ease-in;

}

98% {            opacity: 1;            visibility: visible;            -webkit-animation-timing-function: ease-in;

}

100% {            opacity: 0;            visibility: hidden;            -webkit-animation-timing-function: ease-in;

}

}    /*画轴*/

span {        position: absolute;        left: 80px;        top: -13px;        display: block;        width: 800px;        height: 540px;        background: #ebe5d9 url('../img/scroll-right.jpg') no-repeat center left;        -webkit-animation: imageAnimation 5s linear 6s;        -moz-animation: imageAnimation 5s linear 6s;        -o-animation: imageAnimation 5s linear 6s;        -ms-animation: imageAnimation 5s linear 6s;        animation: imageAnimation 5s linear 6s;        -webkit-animation-fill-mode: forwards;        animation-fill-mode: forwards;

}

@keyframes imageAnimation {

0% {            left: 80px;            -webkit-animation-timing-function: ease-in-out;

}

50% {            left: 410px;            -webkit-animation-timing-function: ease-in-out;

}

100% {            left: 820px;            -webkit-animation-timing-function: ease-in-out;

}

}

20180809_111016 (1).gif

gif转换有点问题，效果不是很柔和

3.比较

两者都能实现类似效果，但是在css3动画中可以实现跟多的细节，通过transition-timing-function是不是可以做跟多的改变呢，现在流行的趋势中，mvvm的思想都是尽量不用dom操作，所以说将来的css3动画会右更多的发展空间

在现在流行的js库中，实现动画更多的使用的是css3的animation实现，还有浏览器对css3的支持度越来越高，在对比中提现css3将来的地位还是举足轻重的，3.1swiper

image.png3.2 bootstrap

image.png

作者：天天_哥

链接：https://www.jianshu.com/p/e66a06255e72