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

    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)

    /*小鱼*/
    .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;
        }
    }