页面头部banner动画效果

        <style>.gofirst_w1920{ height:825px; overflow:hidden; background:url(http://img14.360buyimg.com/cms/jfs/t5047/174/1365291527/300533/83ca39e1/58f03b5eNa6f01cec.jpg) no-repeat top center;}
.gofirst_w990{ 990px; height:825px; margin:0 auto; position:relative;}
.gofirst_phone_s1{
    1920px; height:816px;
    position:absolute; top:0px; left:-465px;    
}
.gofirst_phone_s1 .contents{1920px; height:816px; background:url(http://img14.360buyimg.com/cms/jfs/t4852/137/1373833077/118748/6feb6cbc/58f03835Naf58e833.png) no-repeat;}
.gofirst_phone_s2{
    1160px; height:825px;
    position:absolute; top:0px; left:-90px;
    background:url(http://img12.360buyimg.com/cms/jfs/t5269/203/67305319/918130/81c3f39e/58f82d37Nb2a7d1da.png) no-repeat;
}
.gofirst_phone_s2 .contents{1160px; height:825px;  background:url(http://img12.360buyimg.com/cms/jfs/t5269/203/67305319/918130/81c3f39e/58f82d37Nb2a7d1da.png) no-repeat;}
.animated {
    -webkit-animation-duration: 0.7s;
    animation-duration: 0.7s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}
@-webkit-keyframes shake {
    0%,100% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
    10%,30%,50%,70%,90% {
        -webkit-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0)
    }
    20%,40%,60%,80% {
        -webkit-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0)
    }
}
@keyframes shake {
    0%,100% {
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
 
    10%,30%,50%,70%,90% {
        -webkit-transform: translate3d(-10px,0,0);
        -ms-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0)
    }

    20%,40%,60%,80% {
        -webkit-transform: translate3d(10px,0,0);
        -ms-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0)
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake
}
@-webkit-keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1,.1,.1) translate3d(0,2000px,-1000px);
        transform: scale3d(.1,.1,.1) translate3d(0,2000px,-1000px);
        -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
        animation-timing-function: cubic-bezier(0.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
        animation-timing-function: cubic-bezier(0.175,.885,.32,1)
    }
}
@keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1,.1,.1) translate3d(0,2000px,-1000px);
        -ms-transform: scale3d(.1,.1,.1) translate3d(0,2000px,-1000px);
        transform: scale3d(.1,.1,.1) translate3d(0,2000px,-1000px);
        -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
        animation-timing-function: cubic-bezier(0.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        -ms-transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
        animation-timing-function: cubic-bezier(0.175,.885,.32,1)
    }
}

.zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown
}
.animated.delay01{ -webkit-animation-delay:300ms; -moz-animation-delay:300ms; -o-animation-delay:300ms; animation-delay:300ms;}
.animated.delay02{ -webkit-animation-delay:600ms; -moz-animation-delay:600ms; -o-animation-delay:600ms; animation-delay:600ms;}
</style>

<div class="gofirst_w1920 animated shake">
    <div class="gofirst_w990">  
        <div class="gofirst_phone_s1 animated zoomInDown">  
            <div class="contents animated shake delay02">
            </div>    
        </div>     
        <div class="gofirst_phone_s2 animated">    
            <div class="contents animated shake delay02">                    
            </div>      
        </div>   
    </div>
 </div>