@import url(animate.min.css );
.h5 { opacity: 0; }
.h5show { opacity: 1; }
/*执行时间*/
.duration05 { animation-duration: 0.5s !important; }
.duration1 { animation-duration: 1s !important; }
.duration2 { animation-duration: 2s !important; }
.duration3 { animation-duration: 3s !important; }
.duration4 { animation-duration: 4s !important; }
.duration5 { animation-duration: 5s !important; }
/*延时*/
.delay02 { animation-delay: 0.2s !important; }
.delay04 { animation-delay: 0.4s !important; }
.delay06 { animation-delay: 0.6s !important; }
.delay08 { animation-delay: 0.8s !important; }
.delay10 { animation-delay: 1s !important; }
.delay12 { animation-delay: 1.2s !important; }
.delay14 { animation-delay: 1.4s !important; }
.delay16 { animation-delay: 1.6s !important; }
.delay18 { animation-delay: 1.8s !important; }
.delay20 { animation-delay: 2s !important; }
.delay30 { animation-delay: 3s !important; }
.delay40 { animation-delay: 4s !important; }
/**/
.ovhd { overflow: hidden; }
.h5left { transition: all 1.2s ease 0s; transform: translateX(-1000px); }
.h5left.go { transform: translateX(0px); }
.h5right { transition: all 1.2s ease 0s; transform: translateX(1000px); }
.h5right.go { transform: translateX(0px); }
.h5up { transition: all 1s ease-out 0s; transform: translateY(-200px); }
.h5up.go { transform: translateY(0px); }
.h5down { transition: all 1s ease-out 0s; transform: translateY(400px); }
.h5down.go { transform: translateY(0px); }
.h5scale { transition: all 1s ease 0s; transform: scale(0); }
.h5scale.go { transform: scale(1); }
.h5scale2 { transition: all 1.5s ease 0s; transform: scale(2) translateY(100px); }/*这个好*/
.h5scale2.go { transform: scale(1) translateY(0px); }
.h5scaleX { transition: all 1s ease 0s; transform: scaleX(0); }/*竖向展开*/
.h5scaleX.go { transform: scaleX(1); }
.h5rotateY { transition: all 2s ease 0s; transform: rotateY(90deg); }/*横向展开*/
.h5rotateY.go { transform: rotateY(0deg); }
.h5rotateX { transition: all 1.2s ease 0s; transform: rotateX(90deg) }
.h5rotateX.go { transform: rotateX(0deg); }
.h5skewX { transition: all 2s ease 0s; transform: skewX(90deg) }
.h5skewX.go { transform: skewX(0deg); }
.h5bounceIn { }
.h5bounceIn.go { animation-duration: 0.75s; animation-name: bounceIn; }
.h5flipInX { }
.h5flipInX.go { animation-duration: 7.75s; animation-name: flipInX; backface-visibility: visible; }
.h5bounceInDown{}
.h5bounceInDown.go{animation-delay: 1.3s;
animation-name: bounceInDown;
visibility: visible;}


.h53d{}
.h53d.go { animation-delay: 0.1s; animation-duration: 1s; visibility: visible; animation-name: flip; backface-visibility: visible; }
 @keyframes flip {
0% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -360deg);
transform:perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out
}
40% {
-webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out
}
50% {
-webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in
}
80% {
-webkit-transform:perspective(400px) scale3d(.95, .95, .95);
transform:perspective(400px) scale3d(.95, .95, .95);
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in
}
100% {
-webkit-transform:perspective(400px);
transform:perspective(400px);
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in
}
}
.bounceIn { animation-duration: 0.75s; animation-name: bounceIn; }
@keyframes bounceIn {
 from, 20%, 40%, 60%, 80%, to {
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
 0% {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
}
 20% {
 -webkit-transform: scale3d(1.1, 1.1, 1.1);
 transform: scale3d(1.1, 1.1, 1.1);
}
 40% {
 -webkit-transform: scale3d(.9, .9, .9);
 transform: scale3d(.9, .9, .9);
}
 60% {
 opacity: 1;
 -webkit-transform: scale3d(1.03, 1.03, 1.03);
 transform: scale3d(1.03, 1.03, 1.03);
}
 80% {
 -webkit-transform: scale3d(.97, .97, .97);
 transform: scale3d(.97, .97, .97);
}
 to {
 opacity: 1;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}
 @keyframes flipInX {
 0% {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 -webkit-transition-timing-function: ease-in;
 transition-timing-function: ease-in;
 opacity: 0;
}
 40% {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 -webkit-transition-timing-function: ease-in;
 transition-timing-function: ease-in;
}
 60% {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
 -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
 transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
 opacity: 1;
}
 80% {
 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
 -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
 transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
 100% {
 -webkit-transform: perspective(400px);
 -ms-transform: perspective(400px);
 transform: perspective(400px);
}
}
.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}
@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}
60%{opacity:1;-webkit-transform:translateX(30px);transform:translateX(30px)}
80%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}
100%{-webkit-transform:translateX(0);transform:translateX(0)}
}
/**/