css3动画代替js脚本实现欢迎页面动画

1.使用脚本操作dom元素

在页面加载时，使用js控制dom的animation

    setTimeout(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.png

3.2 bootstrap

image.png

作者：天天_哥
链接：https://www.jianshu.com/p/e66a06255e72