*{margin: 0;padding: 0}
html,body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute;}
.tips_blk{z-index:99999999999;position:absolute;left:50%;bottom:10px;width:130px;height: 20px;margin-left:-65px;text-align:center;}
.tips_blk p{z-index:99999999999;font-size:10px;color:#FFF;}
.tips_blk_hide p{z-index:99999999999;display:none;}
.loading{position:absolute;width:100%;height:100%;background:url('../images/loading.jpg') no-repeat;background-size:100% 100%;z-index: 99;}
.loading_img{position: absolute;left:28%;top:18%;width: 42%;height:30%;opacity: 0;}
.load_wave{
    position:absolute;top:37.5%;left:17%;width: 65%;height:10px;background-color: #f3f0eb;
}
.load_val{
    position:absolute;top:0;left:0;width: 0;height:100%;background-color: #f82d30;
}

@keyframes fade{ 0%{ opacity:1; } 32%{ opacity:1;} 33%{ opacity:0; } 100%{ opacity:0; } }

a{opacity:1}

/*音乐*/
.music_blk{z-index:999;position:fixed;top:12px;left:20px;display: none}
.music{width:30px;height:30px;background:url('../images/music_on.png') no-repeat;background-size:100% 100%;position: absolute}
.music_on{
    -webkit-animation:rotate 1.2s linear infinite;
    animation:rotate 1.2s linear infinite;
}

.bg0{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/p0.jpg") no-repeat 0 0;background-size:100% 100%;}
.bg0 .w0{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p0.1.png') no-repeat 0 0;background-size:100% 100%;}
.bg0 .w1{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p0.2.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.bg0 .w2{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p0.3.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.bg0 .btn0{position: absolute;top:36%;left:32%;width: 35%;height:14%;}

.bg0.ani .w1{
    animation:fadeInLeft 1.5s .5s linear both;
    -moz-animation:fadeInLeft 1.5s .5s linear both;
    -webkit-animation:fadeInLeft 1.5s .5s linear both;
    -o-animation:fadeInLeft 1.5s .5s linear both
}
.bg0.ani .w2{
    animation:fadeInOut 3s 2s linear infinite;
    -moz-animation:fadeInOut 3s 2s linear infinite;
    -webkit-animation:fadeInOut 3s 2s linear infinite;
    -o-animation:fadeInOut 3s 2s linear infinite
}

#bg{width: 307%;height: 100%;top:0;left:0;margin: 0 auto;overflow: hidden;position: absolute;background:url('../images/p1.jpg') no-repeat 0 0;background-size:100% 100%;}

.bg1{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background-size:100% 100%;}
.bg1 .w0{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p1.1.png') no-repeat 0 0;background-size:100% 100%;}
.bg1 .w1{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p1.2.png') no-repeat 0 0;background-size:100% 100%;}
.bg1 .w2{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p1.3.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;}

.bg1 .w3{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p1.5.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.bg1 .w4{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p1.5.1.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.bg1 .w5{position: absolute;top:93%;left:76%;width: 3.5%;height:4.5%;background:url('../images/p1.5.2.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;transform-origin: bottom center;transform: rotate(-47deg);}
.bg1 .w6{position: absolute;top:93%;left:21%;width: 3.5%;height:4.5%;background:url('../images/p1.5.3.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;transform-origin: bottom center;transform: rotate(-47deg);}
.bg1 .w7{position: absolute;top:44%;left:61%;width: 10.7%;height:7%;background:url('../images/p1.5.4.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;display: none;}
.bg1 .w8{position: absolute;top:17%;left:63%;width: 17%;height:12%;background:url('../images/p1.5.5.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;z-index: 99;}
.bg1 .w9{position: absolute;top:29%;left:74%;width: 12%;height:16%;background:url('../images/p1.5.6.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;}

.bg1 .w10{position: absolute;top:16%;left:52%;width: 32%;height:14%;background:url('../images/p1.6.1.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;z-index: 99;display: none;}
.bg1 .w11{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p1.6.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.bg1 .w12{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p1.6.4.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.bg1 .w13{position: absolute;top:72%;left:20%;width: 55.7%;height:3.8%;background:url('../images/p1.6.5.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.bg1 .w14{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p1.6.6.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.bg1 .w15{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p1.7.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;}

.bg1 .w16{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p2.1.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.bg1 .w17{position: absolute;top:73%;left:22%;width: 46%;height:12.8%;background:url('../images/p2.2.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.bg1 .w18{position: absolute;bottom:0;left:0;width: 100%;height:38%;background:url('../images/p2.3.gif') no-repeat 0 0;background-size:100% 100%;display: none;}


#car{position: absolute;top: 37%;left: 14%;width: 71%;height: 27%;}
#canvas{position: absolute;top: 37%;left: 14%;}

.bg1 .tyre1{position: absolute;top:52.5%;left:28%;width: 13%;background:url('../images/tyre.png') no-repeat 0 0;background-size:100% 100%;}
.bg1 .tyre2{position: absolute;top:52.5%;left:60%;width: 13%;background:url('../images/tyre.png') no-repeat 0 0;background-size:100% 100%;}
.bg1 .btn1{position: absolute;top:79%;left:13%;width: 31%;height:6%;}
.bg1 .btn2{position: absolute;top:79%;left:54%;width: 31%;height:6%;}
.bg1 .btn3{position: absolute;top:91%;left:35%;width: 31%;height:6%;display: none;}
.bg1 .btn4{position: absolute;top:73%;left:33%;width: 33%;height:9%;display: none;}

.bg1.ani .w2{
    animation:fadeIn 1.5s .5s linear both;
    -moz-animation:fadeIn 1.5s .5s linear both;
    -webkit-animation:fadeIn 1.5s .5s linear both;
    -o-animation:fadeIn 1.5s .5s linear both
}
.bg1.ani1 .w0{
    animation:fadeOut 1s linear both;
    -moz-animation:fadeOut 1s linear both;
    -webkit-animation:fadeOut 1s linear both;
    -o-animation:fadeOut 1s linear both
}
.bg1.ani1 .w1{
    animation:fadeOut 1s linear both;
    -moz-animation:fadeOut 1s linear both;
    -webkit-animation:fadeOut 1s linear both;
    -o-animation:fadeOut 1s linear both
}
.bg1.ani1 .w2{
    animation:fadeOut 1s linear both;
    -moz-animation:fadeOut 1s linear both;
    -webkit-animation:fadeOut 1s linear both;
    -o-animation:fadeOut 1s linear both
}

.bg1.ani2 .w3,.bg1.ani2 .w4,.bg1.ani2 .w5,.bg1.ani2 .w6,.bg1.ani2 .w8,.bg1.ani2 .w9{
    animation:fadeIn 1.5s .5s linear both;
    -moz-animation:fadeIn 1.5s .5s linear both;
    -webkit-animation:fadeIn 1.5s .5s linear both;
    -o-animation:fadeIn 1.5s .5s linear both
}

.bg1.ani3 .w10,.bg1.ani3 .w11,.bg1.ani3 .w12{
    animation:fadeIn 1.5s .5s linear both;
    -moz-animation:fadeIn 1.5s .5s linear both;
    -webkit-animation:fadeIn 1.5s .5s linear both;
    -o-animation:fadeIn 1.5s .5s linear both
}

.bg1.ani4 .w13{
    animation:fadeInOut 1.5s .5s linear both;
    -moz-animation:fadeInOut 1.5s .5s linear both;
    -webkit-animation:fadeInOut 1.5s .5s linear both;
    -o-animation:fadeInOut 1.5s .5s linear both
}

.bg1.ani4 .w14{
    animation:fadeIn 1.5s 2s linear both;
    -moz-animation:fadeIn 1.5s 2s linear both;
    -webkit-animation:fadeIn 1.5s 2s linear both;
    -o-animation:fadeIn 1.5s 2s linear both
}
.bg1.ani4 .w15{
    animation:fadeInOut 2s 2s linear infinite;
    -moz-animation:fadeInOut 2s 2s linear infinite;
    -webkit-animation:fadeInOut 2s 2s linear infinite;
    -o-animation:fadeInOut 2s 2s linear infinite
}

.tyre1.ani1,.tyre2.ani1 {
    -webkit-animation:rotate 1.2s linear infinite;
    animation:rotate 1.2s linear infinite;
}

#bg.ani5{
    animation:moveToLeft 3s .5s linear both;
    -moz-animation:moveToLeft 3s .5s linear both;
    -webkit-animation:moveToLeft 3s .5s linear both;
    -o-animation:moveToLeft 3s .5s linear both
}

.bg1.ani6 .w16,.bg1.ani6 .w17{
    animation:fadeIn 1.5s .5s linear both;
    -moz-animation:fadeIn 1.5s .5s linear both;
    -webkit-animation:fadeIn 1.5s .5s linear both;
    -o-animation:fadeIn 1.5s .5s linear both
}

.bg2{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/p3.jpg") no-repeat 0 0;background-size:100% 100%;}
.bg2 .w0{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p3.1.png') no-repeat 0 0;background-size:100% 100%;}
.bg2 .w1{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p3.2.png') no-repeat 0 0;background-size:100% 100%;}
.bg2 .w2{position: absolute;top: 37%;left: 14%;width: 71%;height: 27%;}
.bg2 .tyre1{position: absolute;top:52.5%;left:28%;width: 13%;background:url('../images/tyre.png') no-repeat 0 0;background-size:100% 100%;}
.bg2 .tyre2{position: absolute;top:52.5%;left:60%;width: 13%;background:url('../images/tyre.png') no-repeat 0 0;background-size:100% 100%;}
.bg2 .btn1{position: absolute;top:83%;left:31%;width: 38%;height:6%;}

.bg3{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/background.jpg") no-repeat 0 0;background-size:100% 100%;}
.bg3 .w0{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p5.1.png') no-repeat 0 0;background-size:100% 100%;}
.bg3 .w1{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p5.2.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.bg3 .w2{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p5.3.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.bg3 .w3{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p5.4.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.bg3 .w4{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p5.5.png') no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.bg3 .w5{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p5.6.png') no-repeat 0 0;background-size:100% 100%;}
.bg3 .btn1{position: absolute;top:31%;left:32%;width: 35%;height:6%;}
.bg3 .btn2{position: absolute;top:40%;left:32%;width: 35%;height:6%;}
.bg3 .btn3{position: absolute;top:50%;left:32%;width: 35%;height:6%;}
.bg3 .btn4{position: absolute;top:59%;left:32%;width: 35%;height:6%;}

.bg3.ani .w1,.bg3.ani .w2,.bg3.ani .w3,.bg3.ani .w4{
    animation:fadeInRight 1.5s .5s linear both;
    -moz-animation:fadeInRight 1.5s .5s linear both;
    -webkit-animation:fadeInRight 1.5s .5s linear both;
    -o-animation:fadeInRight 1.5s .5s linear both
}

.fc1{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/background.jpg") no-repeat 0 0;background-size:100% 100%;}
.fc1 .w0{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p6.1.png') no-repeat 0 0;background-size:100% 100%;}
.fc1 .w1{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p6.2.png') no-repeat 0 0;background-size:100% 100%;}
.fc1 .w2{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p6.3.png') no-repeat 0 0;background-size:100% 100%;}
.fc1 .w3{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p6.4.png') no-repeat 0 0;background-size:100% 100%;}
.fc1 .w4{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/2.jpg') no-repeat 0 0;background-size:100% 100%;display: none;}
.fc1 .btn1{position: absolute;top:1%;right:2%;width: 9%;height:6%;}
.fc1 .btn2{position: absolute;top:73%;left:29%;width: 42%;height:6%;}

.fc2{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/background.jpg") no-repeat 0 0;background-size:100% 100%;}
.fc2 .w0{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p4.1.png') no-repeat 0 0;background-size:100% 100%;}
.fc2 .w1{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p4.2.png') no-repeat 0 0;background-size:100% 100%;display: none;}
.fc2 .w2{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p4.3.png') no-repeat 0 0;background-size:100% 100%;display: none;}
.fc2 .btn1{position: absolute;top:1%;right:2%;width: 9%;height:6%;}
.fc2 .btn2{position: absolute;top:7%;left:7%;width: 24%;height:6%;}
.fc2 .btn3{position: absolute;top:7%;left:39%;width: 24%;height:6%;}
.fc2 .btn4{position: absolute;top:7%;left:68%;width: 24%;height:6%;}

.fc3{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/background.jpg") no-repeat 0 0;background-size:100% 100%;}
#hit1{position: absolute;width:100%;height:100%;background: #fff;z-index: 10;}
#hit1 .h_close{position: absolute;top: 5%;left: 85%;width: 7%;height: 5%;background: url("../images/hc.png") no-repeat 0 0;background-size:100% 100%;margin: 0 auto;overflow: hidden;}
#hit{position: absolute;width:100%;top: 20%;}
.fc3 .w0{position: absolute;top:50%;left:58%;width: 41%;height:14%;background:url('../images/p1.4.png') no-repeat 0 0;background-size:100% 100%;z-index: 9999;}


@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(0);transform: rotate(0);}
    100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes rotate {
    0% {transform: rotate(0)}
    100% {transform: rotate(360deg);}
}

@-webkit-keyframes fadeOut {0% {opacity: 1;}100% {opacity: 0;}}
@-moz-keyframes fadeOut {0% {opacity: 1;}100% {opacity: 0;}}
@keyframes fadeOut {0% {opacity: 1;}100% {opacity: 0;}}

@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

@-webkit-keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}
@-moz-keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}
@keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}

@keyframes moveToLeft
{0%{-webkit-transform:none;transform:none}100%{-webkit-transform:translate3d(-67%,0,0);transform:translate3d(-67%,0,0)}}
@-moz-keyframes moveToLeft /* Firefox */
{0%{-webkit-transform:none;transform:none}100%{-webkit-transform:translate3d(-67%,0,0);transform:translate3d(-67%,0,0)}}
@-webkit-keyframes moveToLeft /* Safari 和 Chrome */
{0%{-webkit-transform:none;transform:none}100%{-webkit-transform:translate3d(-67%,0,0);transform:translate3d(-67%,0,0)}}

@keyframes fadeInLeft
{0%{opacity: 0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity: 1;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInLeft /* Firefox */
{0%{opacity: 0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity: 1;-webkit-transform:none;transform:none}}
@-webkit-keyframes fadeInLeft /* Safari 和 Chrome */
{0%{opacity: 0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity: 1;-webkit-transform:none;transform:none}}

@keyframes fadeInRight
{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInRight /* Firefox */
{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-webkit-keyframes fadeInRight /* Safari 和 Chrome */
{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

@-webkit-keyframes fadeInOut {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}
@-moz-keyframes fadeInOut {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}
@keyframes fadeInOut {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}

@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

@keyframes fadeInRight1
{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:0.7;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInRight1 /* Firefox */
{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:0.7;-webkit-transform:none;transform:none}}
@-webkit-keyframes fadeInRight1 /* Safari 和 Chrome */
{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:0.7;-webkit-transform:none;transform:none}}

@keyframes fadeInRight2
{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)} 80%{opacity: 0} 100%{opacity:1;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInRight1 /* Firefox */
{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)} 80%{opacity: 0} 100%{opacity:1;-webkit-transform:none;transform:none}}
@-webkit-keyframes fadeInRight1 /* Safari 和 Chrome */
{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)} 80%{opacity: 0} 100%{opacity:1;-webkit-transform:none;transform:none}}


@-webkit-keyframes wobble {
    0% {
    -webkit-transform:translateX(0%);
    transform:translateX(0%)
}
15% {
    -webkit-transform:translateX(-25%) rotate(-5deg);
    transform:translateX(-25%) rotate(-5deg)
}
30% {
    -webkit-transform:translateX(20%) rotate(3deg);
    transform:translateX(20%) rotate(3deg)
}
45% {
    -webkit-transform:translateX(-15%) rotate(-3deg);
    transform:translateX(-15%) rotate(-3deg)
}
60% {
    -webkit-transform:translateX(10%) rotate(2deg);
    transform:translateX(10%) rotate(2deg)
}
75% {
    -webkit-transform:translateX(-5%) rotate(-1deg);
    transform:translateX(-5%) rotate(-1deg)
}
100% {
    -webkit-transform:translateX(0%);
    transform:translateX(0%);
    opacity: 1
}
}
@keyframes wobble {
    0% {
    -webkit-transform:translateX(0%);
    -ms-transform:translateX(0%);
    transform:translateX(0%)
}
15% {
    -webkit-transform:translateX(-25%) rotate(-5deg);
    -ms-transform:translateX(-25%) rotate(-5deg);
    transform:translateX(-25%) rotate(-5deg)
}
30% {
    -webkit-transform:translateX(20%) rotate(3deg);
    -ms-transform:translateX(20%) rotate(3deg);
    transform:translateX(20%) rotate(3deg)
}
45% {
    -webkit-transform:translateX(-15%) rotate(-3deg);
    -ms-transform:translateX(-15%) rotate(-3deg);
    transform:translateX(-15%) rotate(-3deg)
}
60% {
    -webkit-transform:translateX(10%) rotate(2deg);
    -ms-transform:translateX(10%) rotate(2deg);
    transform:translateX(10%) rotate(2deg)
}
75% {
    -webkit-transform:translateX(-5%) rotate(-1deg);
    -ms-transform:translateX(-5%) rotate(-1deg);
    transform:translateX(-5%) rotate(-1deg)
}
100% {
    -webkit-transform:translateX(0%);
    -ms-transform:translateX(0%);
    transform:translateX(0%);
    opacity: 1;
}
}

/* 放大显示(向左) */
@-webkit-keyframes zoomInRight {0% {opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60% {opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
100% {opacity:1}
}
@-moz-keyframes zoomInRight {0% {opacity:0;-moz-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-moz-animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60% {opacity:1;-moz-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-moz-animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
100% {opacity:1}
}
@keyframes zoomInRight {0% {opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60% {opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
100% {opacity:1}
}

/* 放大显示(向下) */
@-webkit-keyframes zoomInDown {0% {opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60% {opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
100% {opacity:1}
}
@-moz-keyframes zoomInDown {0% {opacity:0;-moz-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-moz-animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60% {opacity:1;-moz-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-moz-animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
100% {opacity:1}
}
@keyframes zoomInDown {0% {opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60% {opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
100% {opacity:1}
}

@-webkit-keyframes swing {
    20% {
    -webkit-transform:rotate(15deg);
    transform:rotate(15deg)
}
40% {
    -webkit-transform:rotate(-10deg);
    transform:rotate(-10deg)
}
60% {
    -webkit-transform:rotate(5deg);
    transform:rotate(5deg)
}
80% {
    -webkit-transform:rotate(-5deg);
    transform:rotate(-5deg)
}
100% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg)
}
}
@keyframes swing {
    20% {
    -webkit-transform:rotate(15deg);
    -ms-transform:rotate(15deg);
    transform:rotate(15deg)
}
40% {
    -webkit-transform:rotate(-10deg);
    -ms-transform:rotate(-10deg);
    transform:rotate(-10deg)
}
60% {
    -webkit-transform:rotate(5deg);
    -ms-transform:rotate(5deg);
    transform:rotate(5deg)
}
80% {
    -webkit-transform:rotate(-5deg);
    -ms-transform:rotate(-5deg);
    transform:rotate(-5deg)
}
100% {
    -webkit-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg)
}
}