.tt1{
-webkit-animation:tt1 1s 0.5s ease both;
-moz-animation:tt1 1s 0.5s ease both;
}
@-webkit-keyframes tt1{
0%{opacity:0;
-webkit-transform:translateY(-30px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
@-moz-keyframes tt1{
0%{opacity:0;
-moz-transform:translateY(-30px)}
100%{opacity:1;
-moz-transform:translateY(0)}
}

.tt2{
-webkit-animation:tt2 1s 1s ease both;
-moz-animation:tt2 1s 1s ease both;
}
@-webkit-keyframes tt2{
0%{opacity:0;
-webkit-transform:translateY(30px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
@-moz-keyframes tt2{
0%{opacity:0;
-moz-transform:translateY(30px)}
100%{opacity:1;
-moz-transform:translateY(0)}
}

.tt3{
-webkit-animation:tt1 1s 1.5s ease both;
-moz-animation:tt1 1s 1.5s ease both;
}
@-webkit-keyframes tt1{
0%{opacity:0;
-webkit-transform:translateY(-30px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
@-moz-keyframes tt1{
0%{opacity:0;
-moz-transform:translateY(-30px)}
100%{opacity:1;
-moz-transform:translateY(0)}
}

.tt4{
-webkit-animation:tt2 1s 2s ease both;
-moz-animation:tt2 1s 2s ease both;
}
@-webkit-keyframes tt2{
0%{opacity:0;
-webkit-transform:translateY(30px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
@-moz-keyframes tt2{
0%{opacity:0;
-moz-transform:translateY(30px)}
100%{opacity:1;
-moz-transform:translateY(0)}
}


/*通用*/
.fadeInLeft{
-webkit-animation:fadeInLeft 1s 0.8s ease both;
-moz-animation:fadeInLeft 1s 0.8s ease both;
}
@-webkit-keyframes fadeInLeft{
0%{opacity:0;
-webkit-transform:translateX(50px)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInLeft{
0%{opacity:0;
-moz-transform:translateX(50px)}
100%{opacity:1;
-moz-transform:translateX(0)}
}


.fadeInRight{
-webkit-animation:fadeInRight 1s 0.8s ease both;
-moz-animation:fadeInRight 1s 0.8s ease both;
}
@-webkit-keyframes fadeInRight{
0%{opacity:0;
-webkit-transform:translateX(-50px)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInRight{
0%{opacity:0;
-moz-transform:translateX(-50px)}
100%{opacity:1;
-moz-transform:translateX(0)}
}


.fadeInDown{
-webkit-animation:fadeInDown 1s 0.8s ease both;
-moz-animation:fadeInDown 1s 0.8s ease both;
}
@-webkit-keyframes fadeInDown{
0%{opacity:0;
-webkit-transform:translateY(-50px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInDown{
0%{opacity:0;
-moz-transform:translateY(-50px)}
100%{opacity:1;
-moz-transform:translateY(0)}
}

.overturn{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #373737;visibility: hidden\0/;opacity: 0\0/;transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-webkit-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-webkit-transform: rotateY(-90deg) scale(0.8);-moz-transform: rotateY(-90deg) scale(0.8);-ms-transform: rotateY(-90deg) scale(0.8);-o-transform: rotateY(-90deg) scale(0.8);transform: rotateY(-90deg) scale(0.8);}
.overbox:hover .overturn{
        visibility: visible;\0/;
    opacity: 1\0/;
    -webkit-transform: rotateY(0deg) scale(1);
    -moz-transform: rotateY(0deg) scale(1);
    -ms-transform: rotateY(0deg) scale(1);
    -o-transform: rotateY(0deg) scale(1);
    transform: rotateY(0deg) scale(1);
    }
    
    
.upturn{
-webkit-animation:upturn 1s 0.8s ease-in-out both;
-moz-animation:upturn 1s 0.8s ease-in-out both;
}
@-webkit-keyframes upturn{
0%{opacity:0;
-webkit-transform: rotateY(-90deg) scale(0.8)}
100%{opacity:1;
-webkit-transform: rotateY(0deg) scale(1)}
}
@-moz-keyframes upturn{
0%{opacity:0;
-moz-transform: rotateY(-90deg) scale(0.8)}
100%{opacity:1;
-moz-transform:rotateY(0deg) scale(1)}
}