@charset "UTF-8";

/*bounce 往上抬再往下落，最后抖两下*/
@-webkit-keyframes bounce { 0%, 100%, 20%, 53%, 80% {
-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
40%, 43% {
-webkit-transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
-webkit-transform:translate3d(0, -30px, 0);
transform:translate3d(0, -30px, 0)
}
70% {
-webkit-transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
-webkit-transform:translate3d(0, -15px, 0);
transform:translate3d(0, -15px, 0)
}
90% {
-webkit-transform:translate3d(0, -4px, 0);
transform:translate3d(0, -4px, 0)
}
}
@keyframes bounce { 0%, 100%, 20%, 53%, 80% {
-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
-webkit-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
40%, 43% {
-webkit-transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
-webkit-transform:translate3d(0, -30px, 0);
-ms-transform:translate3d(0, -30px, 0);
transform:translate3d(0, -30px, 0)
}
70% {
-webkit-transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
transition-timing-function:cubic-bezier(0.755, .050, .855, .060);
-webkit-transform:translate3d(0, -15px, 0);
-ms-transform:translate3d(0, -15px, 0);
transform:translate3d(0, -15px, 0)
}
90% {
-webkit-transform:translate3d(0, -4px, 0);
-ms-transform:translate3d(0, -4px, 0);
transform:translate3d(0, -4px, 0)
}
}
.bounce { -webkit-animation-name:bounce; animation-name:bounce; -webkit-transform-origin:center bottom; -ms-transform-origin:center bottom; transform-origin:center bottom }
/*flash 原地闪两下*/
@-webkit-keyframes flash { 0%, 100%, 50% {
opacity:1
}
25%, 75% {
opacity:0
}
}
@keyframes flash { 0%, 100%, 50% {
opacity:1
}
25%, 75% {
opacity:0
}
}
.flash { -webkit-animation-name:flash; animation-name:flash }
/*pulse 3D效果，类似于变大变模糊一下最后恢复*/
@-webkit-keyframes pulse { 0% {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
50% {
-webkit-transform:scale3d(1.05, 1.05, 1.05);
transform:scale3d(1.05, 1.05, 1.05)
}
100% {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}
@keyframes pulse { 0% {
-webkit-transform:scale3d(1, 1, 1);
-ms-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
50% {
-webkit-transform:scale3d(1.05, 1.05, 1.05);
-ms-transform:scale3d(1.05, 1.05, 1.05);
transform:scale3d(1.05, 1.05, 1.05)
}
100% {
-webkit-transform:scale3d(1, 1, 1);
-ms-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}
.pulse { -webkit-animation-name:pulse; animation-name:pulse }
/*rubberBand 类似于拉皮筋，拉长再放开，皮筋会弹回去并抖动两下*/
@-webkit-keyframes rubberBand { 0% {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
30% {
-webkit-transform:scale3d(1.25, .75, 1);
transform:scale3d(1.25, .75, 1)
}
40% {
-webkit-transform:scale3d(0.75, 1.25, 1);
transform:scale3d(0.75, 1.25, 1)
}
50% {
-webkit-transform:scale3d(1.15, .85, 1);
transform:scale3d(1.15, .85, 1)
}
65% {
-webkit-transform:scale3d(.95, 1.05, 1);
transform:scale3d(.95, 1.05, 1)
}
75% {
-webkit-transform:scale3d(1.05, .95, 1);
transform:scale3d(1.05, .95, 1)
}
100% {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}
@keyframes rubberBand { 0% {
-webkit-transform:scale3d(1, 1, 1);
-ms-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
30% {
-webkit-transform:scale3d(1.25, .75, 1);
-ms-transform:scale3d(1.25, .75, 1);
transform:scale3d(1.25, .75, 1)
}
40% {
-webkit-transform:scale3d(0.75, 1.25, 1);
-ms-transform:scale3d(0.75, 1.25, 1);
transform:scale3d(0.75, 1.25, 1)
}
50% {
-webkit-transform:scale3d(1.15, .85, 1);
-ms-transform:scale3d(1.15, .85, 1);
transform:scale3d(1.15, .85, 1)
}
65% {
-webkit-transform:scale3d(.95, 1.05, 1);
-ms-transform:scale3d(.95, 1.05, 1);
transform:scale3d(.95, 1.05, 1)
}
75% {
-webkit-transform:scale3d(1.05, .95, 1);
-ms-transform:scale3d(1.05, .95, 1);
transform:scale3d(1.05, .95, 1)
}
100% {
-webkit-transform:scale3d(1, 1, 1);
-ms-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}
.rubberBand { -webkit-animation-name:rubberBand; animation-name:rubberBand }
/*shake 左右抖动四五下*/
@-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 }
/*swing 模仿跷跷板，以中间为支点，抬起左边然后放下，左右跷几下最后恢复平衡*/
@-webkit-keyframes swing { 20% {
-webkit-transform:rotate3d(0, 0, 1, 15deg);
transform:rotate3d(0, 0, 1, 15deg)
}
40% {
-webkit-transform:rotate3d(0, 0, 1, -10deg);
transform:rotate3d(0, 0, 1, -10deg)
}
60% {
-webkit-transform:rotate3d(0, 0, 1, 5deg);
transform:rotate3d(0, 0, 1, 5deg)
}
80% {
-webkit-transform:rotate3d(0, 0, 1, -5deg);
transform:rotate3d(0, 0, 1, -5deg)
}
100% {
-webkit-transform:rotate3d(0, 0, 1, 0deg);
transform:rotate3d(0, 0, 1, 0deg)
}
}
@keyframes swing { 20% {
-webkit-transform:rotate3d(0, 0, 1, 15deg);
-ms-transform:rotate3d(0, 0, 1, 15deg);
transform:rotate3d(0, 0, 1, 15deg)
}
40% {
-webkit-transform:rotate3d(0, 0, 1, -10deg);
-ms-transform:rotate3d(0, 0, 1, -10deg);
transform:rotate3d(0, 0, 1, -10deg)
}
60% {
-webkit-transform:rotate3d(0, 0, 1, 5deg);
-ms-transform:rotate3d(0, 0, 1, 5deg);
transform:rotate3d(0, 0, 1, 5deg)
}
80% {
-webkit-transform:rotate3d(0, 0, 1, -5deg);
-ms-transform:rotate3d(0, 0, 1, -5deg);
transform:rotate3d(0, 0, 1, -5deg)
}
100% {
-webkit-transform:rotate3d(0, 0, 1, 0deg);
-ms-transform:rotate3d(0, 0, 1, 0deg);
transform:rotate3d(0, 0, 1, 0deg)
}
}
.swing { -webkit-transform-origin:top center; -ms-transform-origin:top center; transform-origin:top center; -webkit-animation-name:swing; animation-name:swing }
/*tada 类似于将pulse(变大变模糊)与swing(跷跷板)效果结合，并跷的不太明显*/
@-webkit-keyframes tada { 0% {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
10%, 20% {
-webkit-transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
}
30%, 50%, 70%, 90% {
-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
}
40%, 60%, 80% {
-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
}
100% {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}
@keyframes tada { 0% {
-webkit-transform:scale3d(1, 1, 1);
-ms-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
10%, 20% {
-webkit-transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
-ms-transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform:scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
}
30%, 50%, 70%, 90% {
-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
-ms-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
}
40%, 60%, 80% {
-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
-ms-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
}
100% {
-webkit-transform:scale3d(1, 1, 1);
-ms-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}
.tada { -webkit-animation-name:tada; animation-name:tada }
/*wobble 类似不倒翁，显示效果部分相当于不倒翁的头部，支点在底部看不到的地方*/
@-webkit-keyframes wobble { 0% {
-webkit-transform:none;
transform:none
}
15% {
-webkit-transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
}
30% {
-webkit-transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
}
45% {
-webkit-transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
}
60% {
-webkit-transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
}
75% {
-webkit-transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
}
100% {
-webkit-transform:none;
transform:none
}
}
@keyframes wobble { 0% {
-webkit-transform:none;
-ms-transform:none;
transform:none
}
15% {
-webkit-transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
-ms-transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
}
30% {
-webkit-transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
-ms-transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
}
45% {
-webkit-transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
-ms-transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
}
60% {
-webkit-transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
-ms-transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
}
75% {
-webkit-transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
-ms-transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
}
100% {
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
.wobble { -webkit-animation-name:wobble; animation-name:wobble }
/*bounceIn 从一点扩散出来并抖动两下最终停止*/
@-webkit-keyframes bounceIn { 0%, 100%, 20%, 40%, 60%, 80% {
-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
transition-timing-function:cubic-bezier(0.215, .61, .355, 1)
}
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)
}
100% {
opacity:1;
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}
@keyframes bounceIn { 0%, 100%, 20%, 40%, 60%, 80% {
-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
transition-timing-function:cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
-ms-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3)
}
20% {
-webkit-transform:scale3d(1.1, 1.1, 1.1);
-ms-transform:scale3d(1.1, 1.1, 1.1);
transform:scale3d(1.1, 1.1, 1.1)
}
40% {
-webkit-transform:scale3d(.9, .9, .9);
-ms-transform:scale3d(.9, .9, .9);
transform:scale3d(.9, .9, .9)
}
60% {
opacity:1;
-webkit-transform:scale3d(1.03, 1.03, 1.03);
-ms-transform:scale3d(1.03, 1.03, 1.03);
transform:scale3d(1.03, 1.03, 1.03)
}
80% {
-webkit-transform:scale3d(.97, .97, .97);
-ms-transform:scale3d(.97, .97, .97);
transform:scale3d(.97, .97, .97)
}
100% {
opacity:1;
-webkit-transform:scale3d(1, 1, 1);
-ms-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}
.bounceIn { -webkit-animation-name:bounceIn; animation-name:bounceIn; -webkit-animation-duration:.75s;
animation-duration:.75s
}
/*bounceInDown 从上往下掉，在指定位置抖两下并停止*/
@-webkit-keyframes bounceInDown { 0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
transition-timing-function:cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity:0;
-webkit-transform:translate3d(0, -3000px, 0);
transform:translate3d(0, -3000px, 0)
}
60% {
opacity:1;
-webkit-transform:translate3d(0, 25px, 0);
transform:translate3d(0, 25px, 0)
}
75% {
-webkit-transform:translate3d(0, -10px, 0);
transform:translate3d(0, -10px, 0)
}
90% {
-webkit-transform:translate3d(0, 5px, 0);
transform:translate3d(0, 5px, 0)
}
100% {
-webkit-transform:none;
transform:none
}
}
@keyframes bounceInDown { 0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
transition-timing-function:cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity:0;
-webkit-transform:translate3d(0, -3000px, 0);
-ms-transform:translate3d(0, -3000px, 0);
transform:translate3d(0, -3000px, 0)
}
60% {
opacity:1;
-webkit-transform:translate3d(0, 25px, 0);
-ms-transform:translate3d(0, 25px, 0);
transform:translate3d(0, 25px, 0)
}
75% {
-webkit-transform:translate3d(0, -10px, 0);
-ms-transform:translate3d(0, -10px, 0);
transform:translate3d(0, -10px, 0)
}
90% {
-webkit-transform:translate3d(0, 5px, 0);
-ms-transform:translate3d(0, 5px, 0);
transform:translate3d(0, 5px, 0)
}
100% {
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
.bounceInDown { -webkit-animation-name:bounceInDown; animation-name:bounceInDown }
/*bounceInLeft 从左往右滑动，在指定位置左右抖两下并停止*/
@-webkit-keyframes bounceInLeft { 0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
transition-timing-function:cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity:0;
-webkit-transform:translate3d(-3000px, 0, 0);
transform:translate3d(-3000px, 0, 0)
}
60% {
opacity:1;
-webkit-transform:translate3d(25px, 0, 0);
transform:translate3d(25px, 0, 0)
}
75% {
-webkit-transform:translate3d(-10px, 0, 0);
transform:translate3d(-10px, 0, 0)
}
90% {
-webkit-transform:translate3d(5px, 0, 0);
transform:translate3d(5px, 0, 0)
}
100% {
-webkit-transform:none;
transform:none
}
}
@keyframes bounceInLeft { 0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
transition-timing-function:cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity:0;
-webkit-transform:translate3d(-3000px, 0, 0);
-ms-transform:translate3d(-3000px, 0, 0);
transform:translate3d(-3000px, 0, 0)
}
60% {
opacity:1;
-webkit-transform:translate3d(25px, 0, 0);
-ms-transform:translate3d(25px, 0, 0);
transform:translate3d(25px, 0, 0)
}
75% {
-webkit-transform:translate3d(-10px, 0, 0);
-ms-transform:translate3d(-10px, 0, 0);
transform:translate3d(-10px, 0, 0)
}
90% {
-webkit-transform:translate3d(5px, 0, 0);
-ms-transform:translate3d(5px, 0, 0);
transform:translate3d(5px, 0, 0)
}
100% {
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
.bounceInLeft { -webkit-animation-name:bounceInLeft; animation-name:bounceInLeft }
/*bounceInRight 从右往左滑动，在指定位置左右抖两下并停止*/
@-webkit-keyframes bounceInRight { 0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
transition-timing-function:cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity:0;
-webkit-transform:translate3d(3000px, 0, 0);
transform:translate3d(3000px, 0, 0)
}
60% {
opacity:1;
-webkit-transform:translate3d(-25px, 0, 0);
transform:translate3d(-25px, 0, 0)
}
75% {
-webkit-transform:translate3d(10px, 0, 0);
transform:translate3d(10px, 0, 0)
}
90% {
-webkit-transform:translate3d(-5px, 0, 0);
transform:translate3d(-5px, 0, 0)
}
100% {
-webkit-transform:none;
transform:none
}
}
@keyframes bounceInRight { 0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
transition-timing-function:cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity:0;
-webkit-transform:translate3d(3000px, 0, 0);
-ms-transform:translate3d(3000px, 0, 0);
transform:translate3d(3000px, 0, 0)
}
60% {
opacity:1;
-webkit-transform:translate3d(-25px, 0, 0);
-ms-transform:translate3d(-25px, 0, 0);
transform:translate3d(-25px, 0, 0)
}
75% {
-webkit-transform:translate3d(10px, 0, 0);
-ms-transform:translate3d(10px, 0, 0);
transform:translate3d(10px, 0, 0)
}
90% {
-webkit-transform:translate3d(-5px, 0, 0);
-ms-transform:translate3d(-5px, 0, 0);
transform:translate3d(-5px, 0, 0)
}
100% {
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
.bounceInRight { -webkit-animation-name:bounceInRight; animation-name:bounceInRight }
/*bounceInUp 从下往上升，在指定位置抖两下并停止*/
@-webkit-keyframes bounceInUp { 0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
transition-timing-function:cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity:0;
-webkit-transform:translate3d(0, 3000px, 0);
transform:translate3d(0, 3000px, 0)
}
60% {
opacity:1;
-webkit-transform:translate3d(0, -20px, 0);
transform:translate3d(0, -20px, 0)
}
75% {
-webkit-transform:translate3d(0, 10px, 0);
transform:translate3d(0, 10px, 0)
}
90% {
-webkit-transform:translate3d(0, -5px, 0);
transform:translate3d(0, -5px, 0)
}
100% {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
@keyframes bounceInUp { 0%, 100%, 60%, 75%, 90% {
-webkit-transition-timing-function:cubic-bezier(0.215, .61, .355, 1);
transition-timing-function:cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity:0;
-webkit-transform:translate3d(0, 3000px, 0);
-ms-transform:translate3d(0, 3000px, 0);
transform:translate3d(0, 3000px, 0)
}
60% {
opacity:1;
-webkit-transform:translate3d(0, -20px, 0);
-ms-transform:translate3d(0, -20px, 0);
transform:translate3d(0, -20px, 0)
}
75% {
-webkit-transform:translate3d(0, 10px, 0);
-ms-transform:translate3d(0, 10px, 0);
transform:translate3d(0, 10px, 0)
}
90% {
-webkit-transform:translate3d(0, -5px, 0);
-ms-transform:translate3d(0, -5px, 0);
transform:translate3d(0, -5px, 0)
}
100% {
-webkit-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
}
.bounceInUp { -webkit-animation-name:bounceInUp; animation-name:bounceInUp }
/*bounceOut 抖两下后缩小成一点并消失，最后瞬间恢复*/
@-webkit-keyframes bounceOut { 20% {
-webkit-transform:scale3d(.9, .9, .9);
transform:scale3d(.9, .9, .9)
}
50%, 55% {
opacity:1;
-webkit-transform:scale3d(1.1, 1.1, 1.1);
transform:scale3d(1.1, 1.1, 1.1)
}
100% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3)
}
}
@keyframes bounceOut { 20% {
-webkit-transform:scale3d(.9, .9, .9);
-ms-transform:scale3d(.9, .9, .9);
transform:scale3d(.9, .9, .9)
}
50%, 55% {
opacity:1;
-webkit-transform:scale3d(1.1, 1.1, 1.1);
-ms-transform:scale3d(1.1, 1.1, 1.1);
transform:scale3d(1.1, 1.1, 1.1)
}
100% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
-ms-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3)
}
}
.bounceOut { -webkit-animation-name:bounceOut; animation-name:bounceOut; -webkit-animation-duration:.75s;
animation-duration:.75s
}
/*bounceOutDown 抖一下后往下掉出界面，最后瞬间恢复*/
@-webkit-keyframes bounceOutDown {
20% {
-webkit-transform:translate3d(0, 10px, 0);
transform:translate3d(0, 10px, 0)
}
40%, 45% {
opacity:1;
-webkit-transform:translate3d(0, -20px, 0);
transform:translate3d(0, -20px, 0)
}
100% {
opacity:0;
-webkit-transform:translate3d(0, 2000px, 0);
transform:translate3d(0, 2000px, 0)
}
}
@keyframes bounceOutDown { 20% {
-webkit-transform:translate3d(0, 10px, 0);
-ms-transform:translate3d(0, 10px, 0);
transform:translate3d(0, 10px, 0)
}
40%, 45% {
opacity:1;
-webkit-transform:translate3d(0, -20px, 0);
-ms-transform:translate3d(0, -20px, 0);
transform:translate3d(0, -20px, 0)
}
100% {
opacity:0;
-webkit-transform:translate3d(0, 2000px, 0);
-ms-transform:translate3d(0, 2000px, 0);
transform:translate3d(0, 2000px, 0)
}
}
.bounceOutDown { -webkit-animation-name:bounceOutDown; animation-name:bounceOutDown }
/*bounceOutLeft 先往右抖一下，最后迅速往左滑出界面，最后瞬间恢复*/
@-webkit-keyframes bounceOutLeft { 20% {
opacity:1;
-webkit-transform:translate3d(20px, 0, 0);
transform:translate3d(20px, 0, 0)
}
100% {
opacity:0;
-webkit-transform:translate3d(-2000px, 0, 0);
transform:translate3d(-2000px, 0, 0)
}
}
@keyframes bounceOutLeft { 20% {
opacity:1;
-webkit-transform:translate3d(20px, 0, 0);
-ms-transform:translate3d(20px, 0, 0);
transform:translate3d(20px, 0, 0)
}
100% {
opacity:0;
-webkit-transform:translate3d(-2000px, 0, 0);
-ms-transform:translate3d(-2000px, 0, 0);
transform:translate3d(-2000px, 0, 0)
}
}
.bounceOutLeft { -webkit-animation-name:bounceOutLeft; animation-name:bounceOutLeft }
/*bounceOutRight 先往左抖一下，最后迅速往右滑出界面，最后瞬间恢复*/
@-webkit-keyframes bounceOutRight { 20% {
opacity:1;
-webkit-transform:translate3d(-20px, 0, 0);
transform:translate3d(-20px, 0, 0)
}
100% {
opacity:0;
-webkit-transform:translate3d(2000px, 0, 0);
transform:translate3d(2000px, 0, 0)
}
}
@keyframes bounceOutRight { 20% {
opacity:1;
-webkit-transform:translate3d(-20px, 0, 0);
-ms-transform:translate3d(-20px, 0, 0);
transform:translate3d(-20px, 0, 0)
}
100% {
opacity:0;
-webkit-transform:translate3d(2000px, 0, 0);
-ms-transform:translate3d(2000px, 0, 0);
transform:translate3d(2000px, 0, 0)
}
}
.bounceOutRight { -webkit-animation-name:bounceOutRight; animation-name:bounceOutRight }
/*bounceOutUp 抖一下后往上飞出界面，最后瞬间恢复*/
@-webkit-keyframes bounceOutUp {
20% {
-webkit-transform:translate3d(0, -10px, 0);
transform:translate3d(0, -10px, 0)
}
40%, 45% {
opacity:1;
-webkit-transform:translate3d(0, 20px, 0);
transform:translate3d(0, 20px, 0)
}
100% {
opacity:0;
-webkit-transform:translate3d(0, -2000px, 0);
transform:translate3d(0, -2000px, 0)
}
}
@keyframes bounceOutUp { 20% {
-webkit-transform:translate3d(0, -10px, 0);
-ms-transform:translate3d(0, -10px, 0);
transform:translate3d(0, -10px, 0)
}
40%, 45% {
opacity:1;
-webkit-transform:translate3d(0, 20px, 0);
-ms-transform:translate3d(0, 20px, 0);
transform:translate3d(0, 20px, 0)
}
100% {
opacity:0;
-webkit-transform:translate3d(0, -2000px, 0);
-ms-transform:translate3d(0, -2000px, 0);
transform:translate3d(0, -2000px, 0)
}
}
.bounceOutUp { -webkit-animation-name:bounceOutUp; animation-name:bounceOutUp }
/*fadeIn 原地闪一下*/
@-webkit-keyframes fadeIn { 0% {
opacity:0
}
100% {
opacity:1
}
}
@keyframes fadeIn { 0% {
opacity:0
}
100% {
opacity:1
}
}
.fadeIn { -webkit-animation-name:fadeIn; animation-name:fadeIn }
/*fadeInDown 从上往下短距离滑动并从隐藏到显示*/
@-webkit-keyframes fadeInDown { 0% {
opacity:0;
-webkit-transform:translate3d(0, -30px, 0);
transform:translate3d(0, -30px, 0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInDown { 0% {
opacity:0;
-webkit-transform:translate3d(0, -30px, 0);
-ms-transform:translate3d(0, -30px, 0);
transform:translate3d(0, -30px, 0)
}
100% {
opacity:1;
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
.fadeInDown { -webkit-animation-name:fadeInDown; animation-name:fadeInDown }
/*fadeInDownBig 从上往下滑动到指定位置并从隐藏到显示*/
@-webkit-keyframes fadeInDownBig { 0% {
opacity:0;
-webkit-transform:translate3d(0, -2000px, 0);
transform:translate3d(0, -2000px, 0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInDownBig { 0% {
opacity:0;
-webkit-transform:translate3d(0, -2000px, 0);
-ms-transform:translate3d(0, -2000px, 0);
transform:translate3d(0, -2000px, 0)
}
100% {
opacity:1;
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
.fadeInDownBig { -webkit-animation-name:fadeInDownBig; animation-name:fadeInDownBig }
/*fadeInLeft 从左往右短距离滑动并从隐藏到显示*/
@-webkit-keyframes fadeInLeft { 0% {
opacity:0;
-webkit-transform:translate3d(-30px, 0, 0);
transform:translate3d(-30px, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInLeft { 0% {
opacity:0;
-webkit-transform:translate3d(-30px, 0, 0);
-ms-transform:translate3d(-30px, 0, 0);
transform:translate3d(-30px, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
.fadeInLeft { -webkit-animation-name:fadeInLeft; animation-name:fadeInLeft }
/*fadeInLeftBig 从左往右滑动到指定位置并从隐藏到显示*/
@-webkit-keyframes fadeInLeftBig { 0% {
opacity:0;
-webkit-transform:translate3d(-2000px, 0, 0);
transform:translate3d(-2000px, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInLeftBig { 0% {
opacity:0;
-webkit-transform:translate3d(-2000px, 0, 0);
-ms-transform:translate3d(-2000px, 0, 0);
transform:translate3d(-2000px, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
.fadeInLeftBig { -webkit-animation-name:fadeInLeftBig; animation-name:fadeInLeftBig }
/*fadeInRight 从右往左短距离滑动并从隐藏到显示*/
@-webkit-keyframes fadeInRight { 0% {
opacity:0;
-webkit-transform:translate3d(30px, 0, 0);
transform:translate3d(30px, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInRight { 0% {
opacity:0;
-webkit-transform:translate3d(30px, 0, 0);
-ms-transform:translate3d(30px, 0, 0);
transform:translate3d(30px, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
.fadeInRight { -webkit-animation-name:fadeInRight; animation-name:fadeInRight }
/*fadeInRightBig 从右往左滑动到指定位置并从隐藏到显示*/
@-webkit-keyframes fadeInRightBig { 0% {
opacity:0;
-webkit-transform:translate3d(2000px, 0, 0);
transform:translate3d(2000px, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInRightBig { 0% {
opacity:0;
-webkit-transform:translate3d(2000px, 0, 0);
-ms-transform:translate3d(2000px, 0, 0);
transform:translate3d(2000px, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
.fadeInRightBig { -webkit-animation-name:fadeInRightBig; animation-name:fadeInRightBig }
/*fadeInUp 从下往上短距离滑动并从隐藏到显示*/
@-webkit-keyframes fadeInUp { 0% {
opacity:0;
-webkit-transform:translate3d(0, 30px, 0);
transform:translate3d(0, 30px, 0)
}
100% {
opacity:0.9;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInUp { 0% {
opacity:0;
-webkit-transform:translate3d(0, 30px, 0);
-ms-transform:translate3d(0, 30px, 0);
transform:translate3d(0, 30px, 0)
}
100% {
opacity:0.9;
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
.fadeInUp { -webkit-animation-name:fadeInUp; animation-name:fadeInUp }
/*fadeInUpBig 从下往上滑动到指定位置并从隐藏到显示*/
@-webkit-keyframes fadeInUpBig { 0% {
opacity:0;
-webkit-transform:translate3d(0, 2000px, 0);
transform:translate3d(0, 2000px, 0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInUpBig { 0% {
opacity:0;
-webkit-transform:translate3d(0, 2000px, 0);
-ms-transform:translate3d(0, 2000px, 0);
transform:translate3d(0, 2000px, 0)
}
100% {
opacity:1;
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
.fadeInUpBig { -webkit-animation-name:fadeInUpBig; animation-name:fadeInUpBig }
/*fadeOpacity 从隐藏到显示*/
@-webkit-keyframes fadeOpacity { 0% {
opacity:0
}
100% {
opacity:1
}
}
@keyframes fadeOpacity { 0% {
opacity:0
}
100% {
opacity:1
}
}
.fadeOpacity { -webkit-animation-name:fadeOpacity; animation-name:fadeOpacity }
/*fadeOut 从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes fadeOut { 0% {
opacity:1
}
100% {
opacity:0
}
}
@keyframes fadeOut { 0% {
opacity:1
}
100% {
opacity:0
}
}
.fadeOut { -webkit-animation-name:fadeOut; animation-name:fadeOut }
/*fadeOutDown 从上往下短距离滑动并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes fadeOutDown { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0)
}
}
@keyframes fadeOutDown { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
-ms-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0)
}
}
.fadeOutDown { -webkit-animation-name:fadeOutDown; animation-name:fadeOutDown }
/*fadeOutDownBig 从上往下滑动到指定位置从并显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes fadeOutDownBig { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(0, 2000px, 0);
transform:translate3d(0, 2000px, 0)
}
}
@keyframes fadeOutDownBig { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(0, 2000px, 0);
-ms-transform:translate3d(0, 2000px, 0);
transform:translate3d(0, 2000px, 0)
}
}
.fadeOutDownBig { -webkit-animation-name:fadeOutDownBig; animation-name:fadeOutDownBig }
/*fadeOutLeft 从右往左短距离滑动并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes fadeOutLeft { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)
}
}
@keyframes fadeOutLeft { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0);
-ms-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)
}
}
.fadeOutLeft { -webkit-animation-name:fadeOutLeft; animation-name:fadeOutLeft }
/*fadeOutLeftBig 从右往左滑出界面并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes fadeOutLeftBig { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(-2000px, 0, 0);
transform:translate3d(-2000px, 0, 0)
}
}
@keyframes fadeOutLeftBig { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(-2000px, 0, 0);
-ms-transform:translate3d(-2000px, 0, 0);
transform:translate3d(-2000px, 0, 0)
}
}
.fadeOutLeftBig { -webkit-animation-name:fadeOutLeftBig; animation-name:fadeOutLeftBig }
/*fadeOutRight 从左往右短距离滑动并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes fadeOutRight { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(100%, 0, 0);
transform:translate3d(100%, 0, 0)
}
}
@keyframes fadeOutRight { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(100%, 0, 0);
-ms-transform:translate3d(100%, 0, 0);
transform:translate3d(100%, 0, 0)
}
}
.fadeOutRight { -webkit-animation-name:fadeOutRight; animation-name:fadeOutRight }
/*fadeOutRightBig 从左往右滑出界面并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes fadeOutRightBig { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(2000px, 0, 0);
transform:translate3d(2000px, 0, 0)
}
}
@keyframes fadeOutRightBig { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(2000px, 0, 0);
-ms-transform:translate3d(2000px, 0, 0);
transform:translate3d(2000px, 0, 0)
}
}
.fadeOutRightBig { -webkit-animation-name:fadeOutRightBig; animation-name:fadeOutRightBig }
/*fadeOutUp 从下往上短距离滑动并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes fadeOutUp { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(0, -30%, 0);
transform:translate3d(0, -30%, 0)
}
}
@keyframes fadeOutUp { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(0, -30%, 0);
-ms-transform:translate3d(0, -30%, 0);
transform:translate3d(0, -30%, 0)
}
}
.fadeOutUp { -webkit-animation-name:fadeOutUp; animation-name:fadeOutUp }
/*fadeOutUpBig 从下往上滑出界面并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes fadeOutUpBig { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(0, -2000px, 0);
transform:translate3d(0, -2000px, 0)
}
}
@keyframes fadeOutUpBig { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(0, -2000px, 0);
-ms-transform:translate3d(0, -2000px, 0);
transform:translate3d(0, -2000px, 0)
}
}
.fadeOutUpBig { -webkit-animation-name:fadeOutUpBig; animation-name:fadeOutUpBig }
/*flip 突出并做3D水平360度翻转最后恢复*/
@-webkit-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
}
}
@keyframes flip { 0% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -360deg);
-ms-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);
-ms-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);
-ms-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);
-ms-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);
-ms-transform:perspective(400px);
transform:perspective(400px);
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in
}
}
.flip { -webkit-backface-visibility:visible; -ms-backface-visibility:visible; backface-visibility:visible; -webkit-animation-name:flip; animation-name:flip }
/*flipInX 平放的内容以3D形式做垂直90度翻转后竖立起来*/
@-webkit-keyframes flipInX { 0% {
-webkit-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);
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);
transform:perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity:1
}
80% {
-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg);
transform:perspective(400px) rotate3d(1, 0, 0, -5deg)
}
100% {
-webkit-transform:perspective(400px);
transform:perspective(400px)
}
}
@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)
}
}
.flipInX { -webkit-backface-visibility:visible!important; -ms-backface-visibility:visible!important; backface-visibility:visible!important; -webkit-animation-name:flipInX; animation-name:flipInX }
/*flipInY 侧放的内容以3D形式做水平90度翻转后显示*/
@-webkit-keyframes flipInY { 0% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-transition-timing-function:ease-in;
transition-timing-function:ease-in;
opacity:0
}
40% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -20deg);
transform:perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-transition-timing-function:ease-in;
transition-timing-function:ease-in
}
60% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, 10deg);
transform:perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity:1
}
80% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -5deg);
transform:perspective(400px) rotate3d(0, 1, 0, -5deg)
}
100% {
-webkit-transform:perspective(400px);
transform:perspective(400px)
}
}
@keyframes flipInY { 0% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
-ms-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-transition-timing-function:ease-in;
transition-timing-function:ease-in;
opacity:0
}
40% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -20deg);
-ms-transform:perspective(400px) rotate3d(0, 1, 0, -20deg);
transform:perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-transition-timing-function:ease-in;
transition-timing-function:ease-in
}
60% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, 10deg);
-ms-transform:perspective(400px) rotate3d(0, 1, 0, 10deg);
transform:perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity:1
}
80% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -5deg);
-ms-transform:perspective(400px) rotate3d(0, 1, 0, -5deg);
transform:perspective(400px) rotate3d(0, 1, 0, -5deg)
}
100% {
-webkit-transform:perspective(400px);
-ms-transform:perspective(400px);
transform:perspective(400px)
}
}
.flipInY { -webkit-backface-visibility:visible!important; -ms-backface-visibility:visible!important; backface-visibility:visible!important; -webkit-animation-name:flipInY; animation-name:flipInY }
/*flipOutX 以3D形式垂直90度翻转后平放并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes flipOutX { 0% {
-webkit-transform:perspective(400px);
transform:perspective(400px)
}
30% {
-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity:1
}
100% {
-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity:0
}
}
@keyframes flipOutX { 0% {
-webkit-transform:perspective(400px);
-ms-transform:perspective(400px);
transform:perspective(400px)
}
30% {
-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);
opacity:1
}
100% {
-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);
opacity:0
}
}
.flipOutX { -webkit-animation-name:flipOutX; animation-name:flipOutX; -webkit-animation-duration:.75s;
animation-duration:.75s;
-webkit-backface-visibility:visible!important; -ms-backface-visibility:visible!important; backface-visibility:visible!important }
/*flipOutY 以3D形式水平90度翻转后侧放并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes flipOutY { 0% {
-webkit-transform:perspective(400px);
transform:perspective(400px)
}
30% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -15deg);
transform:perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity:1
}
100% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity:0
}
}
@keyframes flipOutY { 0% {
-webkit-transform:perspective(400px);
-ms-transform:perspective(400px);
transform:perspective(400px)
}
30% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -15deg);
-ms-transform:perspective(400px) rotate3d(0, 1, 0, -15deg);
transform:perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity:1
}
100% {
-webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
-ms-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity:0
}
}
.flipOutY { -webkit-backface-visibility:visible!important; -ms-backface-visibility:visible!important; backface-visibility:visible!important; -webkit-animation-name:flipOutY; animation-name:flipOutY; -webkit-animation-duration:.75s;
animation-duration:.75s
}
/*lightSpeedIn 倾斜从右往左短距离滑动并从隐藏到显示*/
@-webkit-keyframes lightSpeedIn { 0% {
-webkit-transform:translate3d(100%, 0, 0) skewX(-30deg);
transform:translate3d(100%, 0, 0) skewX(-30deg);
opacity:0
}
60% {
-webkit-transform:skewX(20deg);
transform:skewX(20deg);
opacity:1
}
80% {
-webkit-transform:skewX(-5deg);
transform:skewX(-5deg);
opacity:1
}
100% {
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes lightSpeedIn { 0% {
-webkit-transform:translate3d(100%, 0, 0) skewX(-30deg);
-ms-transform:translate3d(100%, 0, 0) skewX(-30deg);
transform:translate3d(100%, 0, 0) skewX(-30deg);
opacity:0
}
60% {
-webkit-transform:skewX(20deg);
-ms-transform:skewX(20deg);
transform:skewX(20deg);
opacity:1
}
80% {
-webkit-transform:skewX(-5deg);
-ms-transform:skewX(-5deg);
transform:skewX(-5deg);
opacity:1
}
100% {
-webkit-transform:none;
-ms-transform:none;
transform:none;
opacity:1
}
}
.lightSpeedIn { -webkit-animation-name:lightSpeedIn; animation-name:lightSpeedIn; -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out }
/*lightSpeedOut 从左往右短距离倾斜滑动并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes lightSpeedOut { 0% {
opacity:1
}
100% {
-webkit-transform:translate3d(100%, 0, 0) skewX(30deg);
transform:translate3d(100%, 0, 0) skewX(30deg);
opacity:0
}
}
@keyframes lightSpeedOut { 0% {
opacity:1
}
100% {
-webkit-transform:translate3d(100%, 0, 0) skewX(30deg);
-ms-transform:translate3d(100%, 0, 0) skewX(30deg);
transform:translate3d(100%, 0, 0) skewX(30deg);
opacity:0
}
}
.lightSpeedOut { -webkit-animation-name:lightSpeedOut; animation-name:lightSpeedOut; -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in }
/*rotateIn 倒放的内容顺时针转180度并从隐藏到显示*/
@-webkit-keyframes rotateIn { 0% {
-webkit-transform-origin:center;
transform-origin:center;
-webkit-transform:rotate3d(0, 0, 1, -200deg);
transform:rotate3d(0, 0, 1, -200deg);
opacity:0
}
100% {
-webkit-transform-origin:center;
transform-origin:center;
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes rotateIn { 0% {
-webkit-transform-origin:center;
-ms-transform-origin:center;
transform-origin:center;
-webkit-transform:rotate3d(0, 0, 1, -200deg);
-ms-transform:rotate3d(0, 0, 1, -200deg);
transform:rotate3d(0, 0, 1, -200deg);
opacity:0
}
100% {
-webkit-transform-origin:center;
-ms-transform-origin:center;
transform-origin:center;
-webkit-transform:none;
-ms-transform:none;
transform:none;
opacity:1
}
}
.rotateIn { -webkit-animation-name:rotateIn; animation-name:rotateIn }
/*rotateInDownLeft 以左侧为支点从上往下顺时针45度转到水平位置并从隐藏到显示*/
@-webkit-keyframes rotateInDownLeft { 0% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:rotate3d(0, 0, 1, -45deg);
transform:rotate3d(0, 0, 1, -45deg);
opacity:0
}
100% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes rotateInDownLeft { 0% {
-webkit-transform-origin:left bottom;
-ms-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:rotate3d(0, 0, 1, -45deg);
-ms-transform:rotate3d(0, 0, 1, -45deg);
transform:rotate3d(0, 0, 1, -45deg);
opacity:0
}
100% {
-webkit-transform-origin:left bottom;
-ms-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:none;
-ms-transform:none;
transform:none;
opacity:1
}
}
.rotateInDownLeft { -webkit-animation-name:rotateInDownLeft; animation-name:rotateInDownLeft }
/*rotateInDownRight 以右侧为支点从上往下逆时针45度转到水平位置并从隐藏到显示*/
@-webkit-keyframes rotateInDownRight { 0% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:rotate3d(0, 0, 1, 45deg);
transform:rotate3d(0, 0, 1, 45deg);
opacity:0
}
100% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes rotateInDownRight { 0% {
-webkit-transform-origin:right bottom;
-ms-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:rotate3d(0, 0, 1, 45deg);
-ms-transform:rotate3d(0, 0, 1, 45deg);
transform:rotate3d(0, 0, 1, 45deg);
opacity:0
}
100% {
-webkit-transform-origin:right bottom;
-ms-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:none;
-ms-transform:none;
transform:none;
opacity:1
}
}
.rotateInDownRight { -webkit-animation-name:rotateInDownRight; animation-name:rotateInDownRight }
/*rotateInUpLeft 以左侧为支点从下往上逆时针45度转到水平位置并从隐藏到显示*/
@-webkit-keyframes rotateInUpLeft { 0% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:rotate3d(0, 0, 1, 45deg);
transform:rotate3d(0, 0, 1, 45deg);
opacity:0
}
100% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes rotateInUpLeft { 0% {
-webkit-transform-origin:left bottom;
-ms-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:rotate3d(0, 0, 1, 45deg);
-ms-transform:rotate3d(0, 0, 1, 45deg);
transform:rotate3d(0, 0, 1, 45deg);
opacity:0
}
100% {
-webkit-transform-origin:left bottom;
-ms-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:none;
-ms-transform:none;
transform:none;
opacity:1
}
}
.rotateInUpLeft { -webkit-animation-name:rotateInUpLeft; animation-name:rotateInUpLeft }
/*rotateInUpRight 以右侧为支点从下往上顺时针90度转到水平位置并从隐藏到显示*/
@-webkit-keyframes rotateInUpRight { 0% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:rotate3d(0, 0, 1, -90deg);
transform:rotate3d(0, 0, 1, -90deg);
opacity:0
}
100% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes rotateInUpRight { 0% {
-webkit-transform-origin:right bottom;
-ms-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:rotate3d(0, 0, 1, -90deg);
-ms-transform:rotate3d(0, 0, 1, -90deg);
transform:rotate3d(0, 0, 1, -90deg);
opacity:0
}
100% {
-webkit-transform-origin:right bottom;
-ms-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:none;
-ms-transform:none;
transform:none;
opacity:1
}
}
.rotateInUpRight { -webkit-animation-name:rotateInUpRight; animation-name:rotateInUpRight }
/*rotateOut 顺时针转180度后变倒放从并显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes rotateOut { 0% {
-webkit-transform-origin:center;
transform-origin:center;
opacity:1
}
100% {
-webkit-transform-origin:center;
transform-origin:center;
-webkit-transform:rotate3d(0, 0, 1, 200deg);
transform:rotate3d(0, 0, 1, 200deg);
opacity:0
}
}
@keyframes rotateOut { 0% {
-webkit-transform-origin:center;
-ms-transform-origin:center;
transform-origin:center;
opacity:1
}
100% {
-webkit-transform-origin:center;
-ms-transform-origin:center;
transform-origin:center;
-webkit-transform:rotate3d(0, 0, 1, 200deg);
-ms-transform:rotate3d(0, 0, 1, 200deg);
transform:rotate3d(0, 0, 1, 200deg);
opacity:0
}
}
.rotateOut { -webkit-animation-name:rotateOut; animation-name:rotateOut }
/*rotateOutDownLeft 以左侧为支点，水平位置顺时针45度往下并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes rotateOutDownLeft { 0% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
opacity:1
}
100% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:rotate3d(0, 0, 1, 45deg);
transform:rotate3d(0, 0, 1, 45deg);
opacity:0
}
}
@keyframes rotateOutDownLeft { 0% {
-webkit-transform-origin:left bottom;
-ms-transform-origin:left bottom;
transform-origin:left bottom;
opacity:1
}
100% {
-webkit-transform-origin:left bottom;
-ms-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:rotate3d(0, 0, 1, 45deg);
-ms-transform:rotate3d(0, 0, 1, 45deg);
transform:rotate3d(0, 0, 1, 45deg);
opacity:0
}
}
.rotateOutDownLeft { -webkit-animation-name:rotateOutDownLeft; animation-name:rotateOutDownLeft }
/*rotateOutDownRight 以右侧为支点，水平位置逆时针45度往下并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes rotateOutDownRight { 0% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
opacity:1
}
100% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:rotate3d(0, 0, 1, -45deg);
transform:rotate3d(0, 0, 1, -45deg);
opacity:0
}
}
@keyframes rotateOutDownRight { 0% {
-webkit-transform-origin:right bottom;
-ms-transform-origin:right bottom;
transform-origin:right bottom;
opacity:1
}
100% {
-webkit-transform-origin:right bottom;
-ms-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:rotate3d(0, 0, 1, -45deg);
-ms-transform:rotate3d(0, 0, 1, -45deg);
transform:rotate3d(0, 0, 1, -45deg);
opacity:0
}
}
.rotateOutDownRight { -webkit-animation-name:rotateOutDownRight; animation-name:rotateOutDownRight }
/*rotateOutUpLeft 以左侧为支点，水平位置逆时针45度往上并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes rotateOutUpLeft { 0% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
opacity:1
}
100% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:rotate3d(0, 0, 1, -45deg);
transform:rotate3d(0, 0, 1, -45deg);
opacity:0
}
}
@keyframes rotateOutUpLeft { 0% {
-webkit-transform-origin:left bottom;
-ms-transform-origin:left bottom;
transform-origin:left bottom;
opacity:1
}
100% {
-webkit-transform-origin:left bottom;
-ms-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:rotate3d(0, 0, 1, -45deg);
-ms-transform:rotate3d(0, 0, 1, -45deg);
transform:rotate3d(0, 0, 1, -45deg);
opacity:0
}
}
.rotateOutUpLeft { -webkit-animation-name:rotateOutUpLeft; animation-name:rotateOutUpLeft }
/*rotateOutUpRight 以右侧为支点，水平位置顺时针90度往上并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes rotateOutUpRight { 0% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
opacity:1
}
100% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:rotate3d(0, 0, 1, 90deg);
transform:rotate3d(0, 0, 1, 90deg);
opacity:0
}
}
@keyframes rotateOutUpRight { 0% {
-webkit-transform-origin:right bottom;
-ms-transform-origin:right bottom;
transform-origin:right bottom;
opacity:1
}
100% {
-webkit-transform-origin:right bottom;
-ms-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:rotate3d(0, 0, 1, 90deg);
-ms-transform:rotate3d(0, 0, 1, 90deg);
transform:rotate3d(0, 0, 1, 90deg);
opacity:0
}
}
.rotateOutUpRight { -webkit-animation-name:rotateOutUpRight; animation-name:rotateOutUpRight }
/*hinge 右侧支点突然消失以左侧支点为支撑后晃两下并往下掉出界面，最后瞬间恢复*/
@-webkit-keyframes hinge { 0% {
-webkit-transform-origin:top left;
transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out
}
20%, 60% {
-webkit-transform:rotate3d(0, 0, 1, 80deg);
transform:rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin:top left;
transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out
}
40%, 80% {
-webkit-transform:rotate3d(0, 0, 1, 60deg);
transform:rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin:top left;
transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out;
opacity:1
}
100% {
-webkit-transform:translate3d(0, 700px, 0);
transform:translate3d(0, 700px, 0);
opacity:0
}
}
@keyframes hinge { 0% {
-webkit-transform-origin:top left;
-ms-transform-origin:top left;
transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out
}
20%, 60% {
-webkit-transform:rotate3d(0, 0, 1, 80deg);
-ms-transform:rotate3d(0, 0, 1, 80deg);
transform:rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin:top left;
-ms-transform-origin:top left;
transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out
}
40%, 80% {
-webkit-transform:rotate3d(0, 0, 1, 60deg);
-ms-transform:rotate3d(0, 0, 1, 60deg);
transform:rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin:top left;
-ms-transform-origin:top left;
transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out;
opacity:1
}
100% {
-webkit-transform:translate3d(0, 700px, 0);
-ms-transform:translate3d(0, 700px, 0);
transform:translate3d(0, 700px, 0);
opacity:0
}
}
.hinge { -webkit-animation-name:hinge; animation-name:hinge }
/*rollIn 竖放的内容以底部为支点顺时针90度后平放同时支点往右上角短距离滑动并从隐藏到显示*/
@-webkit-keyframes rollIn { 0% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes rollIn { 0% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
-ms-transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
}
100% {
opacity:1;
-webkit-transform:none;
-ms-transform:none;
transform:none
}
}
.rollIn { -webkit-animation-name:rollIn; animation-name:rollIn }
/*rollOut 平放的内容以右侧为支点顺时针90度后竖起同时支点往右下角短距离滑动并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes rollOut { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
}
}
@keyframes rollOut { 0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
-ms-transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
}
}
.rollOut { -webkit-animation-name:rollOut; animation-name:rollOut }
/*zoomIn 从远到近(也可理解成从小到大)并从隐藏到显示*/
@-webkit-keyframes zoomIn { 0% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3)
}
50% {
opacity:1
}
100% {
opacity:1
}
}
@keyframes zoomIn { 0% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
-ms-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3)
}
50% {
opacity:1
}
100% {
opacity:1
}
}
.zoomIn { -webkit-animation-name:zoomIn; animation-name:zoomIn }
/*zoomInDown 从远到近跃过一座山到达山脚再到另一座山的半山腰*/
@-webkit-keyframes zoomInDown { 0% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform:scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-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, -1000px, 0);
-ms-transform:scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform:scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-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 }
/*zoomInLeft 短距离从左到右后再从远到近*/
@-webkit-keyframes zoomInLeft { 0% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform:scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-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(10px, 0, 0);
transform:scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function:cubic-bezier(0.175, .885, .32, 1);
animation-timing-function:cubic-bezier(0.175, .885, .32, 1)
}
}
@keyframes zoomInLeft { 0% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-ms-transform:scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform:scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-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(10px, 0, 0);
-ms-transform:scale3d(.475, .475, .475) translate3d(10px, 0, 0);
transform:scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function:cubic-bezier(0.175, .885, .32, 1);
animation-timing-function:cubic-bezier(0.175, .885, .32, 1)
}
}
.zoomInLeft { -webkit-animation-name:zoomInLeft; animation-name:zoomInLeft }
/*zoomInRight 短距离从右到左后再从远到近*/
@-webkit-keyframes zoomInRight { 0% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-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(-10px, 0, 0);
transform:scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function:cubic-bezier(0.175, .885, .32, 1);
animation-timing-function:cubic-bezier(0.175, .885, .32, 1)
}
}
@keyframes zoomInRight { 0% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-ms-transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-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(-10px, 0, 0);
-ms-transform:scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
transform:scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function:cubic-bezier(0.175, .885, .32, 1);
animation-timing-function:cubic-bezier(0.175, .885, .32, 1)
}
}
.zoomInRight { -webkit-animation-name:zoomInRight; animation-name:zoomInRight }
/*zoomInUp 从远到近趟过一个山谷后跃过一座山峰来到半山腰*/
@-webkit-keyframes zoomInUp { 0% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-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 zoomInUp { 0% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-ms-transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-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)
}
}
.zoomInUp { -webkit-animation-name:zoomInUp; animation-name:zoomInUp }
/*zoomOut 从近到远(也可理解为从大到小)并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes zoomOut { 0% {
opacity:1
}
50% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3)
}
100% {
opacity:0
}
}
@keyframes zoomOut { 0% {
opacity:1
}
50% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
-ms-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3)
}
100% {
opacity:0
}
}
.zoomOut { -webkit-animation-name:zoomOut; animation-name:zoomOut }
/*zoomOutDown 从近到远从半山腰跃过一坐山到山脚再爬上另一座山半山腰并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes zoomOutDown { 40% {
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.55, .055, .675, .19);
animation-timing-function:cubic-bezier(0.55, .055, .675, .19)
}
100% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform:scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin:center bottom;
transform-origin:center bottom;
-webkit-animation-timing-function:cubic-bezier(0.175, .885, .32, 1);
animation-timing-function:cubic-bezier(0.175, .885, .32, 1)
}
}
@keyframes zoomOutDown { 40% {
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.55, .055, .675, .19);
animation-timing-function:cubic-bezier(0.55, .055, .675, .19)
}
100% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-ms-transform:scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform:scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin:center bottom;
-ms-transform-origin:center bottom;
transform-origin:center bottom;
-webkit-animation-timing-function:cubic-bezier(0.175, .885, .32, 1);
animation-timing-function:cubic-bezier(0.175, .885, .32, 1)
}
}
.zoomOutDown { -webkit-animation-name:zoomOutDown; animation-name:zoomOutDown }
/*zoomOutLeft 从近到远再从右往左并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes zoomOutLeft { 40% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(42px, 0, 0);
transform:scale3d(.475, .475, .475) translate3d(42px, 0, 0)
}
100% {
opacity:0;
-webkit-transform:scale(.1) translate3d(-2000px, 0, 0);
transform:scale(.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin:left center;
transform-origin:left center
}
}
@keyframes zoomOutLeft { 40% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(42px, 0, 0);
-ms-transform:scale3d(.475, .475, .475) translate3d(42px, 0, 0);
transform:scale3d(.475, .475, .475) translate3d(42px, 0, 0)
}
100% {
opacity:0;
-webkit-transform:scale(.1) translate3d(-2000px, 0, 0);
-ms-transform:scale(.1) translate3d(-2000px, 0, 0);
transform:scale(.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin:left center;
-ms-transform-origin:left center;
transform-origin:left center
}
}
.zoomOutLeft { -webkit-animation-name:zoomOutLeft; animation-name:zoomOutLeft }
/*zoomOutRight 从近到远再从左往右并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes zoomOutRight { 40% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
transform:scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
}
100% {
opacity:0;
-webkit-transform:scale(.1) translate3d(2000px, 0, 0);
transform:scale(.1) translate3d(2000px, 0, 0);
-webkit-transform-origin:right center;
transform-origin:right center
}
}
@keyframes zoomOutRight { 40% {
opacity:1;
-webkit-transform:scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
-ms-transform:scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
transform:scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
}
100% {
opacity:0;
-webkit-transform:scale(.1) translate3d(2000px, 0, 0);
-ms-transform:scale(.1) translate3d(2000px, 0, 0);
transform:scale(.1) translate3d(2000px, 0, 0);
-webkit-transform-origin:right center;
-ms-transform-origin:right center;
transform-origin:right center
}
}
.zoomOutRight { -webkit-animation-name:zoomOutRight; animation-name:zoomOutRight }
/*zoomOutUp 从近到远再从下往上飞出界面并从显示到隐藏，最后瞬间恢复*/
@-webkit-keyframes zoomOutUp { 40% {
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.55, .055, .675, .19);
animation-timing-function:cubic-bezier(0.55, .055, .675, .19)
}
100% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform:scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-webkit-transform-origin:center bottom;
transform-origin:center bottom;
-webkit-animation-timing-function:cubic-bezier(0.175, .885, .32, 1);
animation-timing-function:cubic-bezier(0.175, .885, .32, 1)
}
}
@keyframes zoomOutUp { 40% {
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.55, .055, .675, .19);
animation-timing-function:cubic-bezier(0.55, .055, .675, .19)
}
100% {
opacity:0;
-webkit-transform:scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-ms-transform:scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform:scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-webkit-transform-origin:center bottom;
-ms-transform-origin:center bottom;
transform-origin:center bottom;
-webkit-animation-timing-function:cubic-bezier(0.175, .885, .32, 1);
animation-timing-function:cubic-bezier(0.175, .885, .32, 1)
}
}
.zoomOutUp { -webkit-animation-name:zoomOutUp; animation-name:zoomOutUp }
/*slideInDown 从上往下短距离滑动*/
@-webkit-keyframes slideInDown { 0% {
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
visibility:visible
}
100% {
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@keyframes slideInDown { 0% {
-webkit-transform:translateY(-100%);
-ms-transform:translateY(-100%);
transform:translateY(-100%);
visibility:visible
}
100% {
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0)
}
}
.slideInDown { -webkit-animation-name:slideInDown; animation-name:slideInDown }
/*slideInLeft 从左往右短距离滑动*/
@-webkit-keyframes slideInLeft { 0% {
-webkit-transform:translateX(-100%);
transform:translateX(-100%);
visibility:visible
}
100% {
-webkit-transform:translateX(0);
transform:translateX(0)
}
}
@keyframes slideInLeft { 0% {
-webkit-transform:translateX(-100%);
-ms-transform:translateX(-100%);
transform:translateX(-100%);
visibility:visible
}
100% {
-webkit-transform:translateX(0);
-ms-transform:translateX(0);
transform:translateX(0)
}
}
.slideInLeft { -webkit-animation-name:slideInLeft; animation-name:slideInLeft }
/*slideInRight 从右往左短距离滑动*/
@-webkit-keyframes slideInRight { 0% {
-webkit-transform:translateX(100%);
transform:translateX(100%);
visibility:visible
}
100% {
-webkit-transform:translateX(0);
transform:translateX(0)
}
}
@keyframes slideInRight { 0% {
-webkit-transform:translateX(100%);
-ms-transform:translateX(100%);
transform:translateX(100%);
visibility:visible
}
100% {
-webkit-transform:translateX(0);
-ms-transform:translateX(0);
transform:translateX(0)
}
}
.slideInRight { -webkit-animation-name:slideInRight; animation-name:slideInRight }
/*slideInUp 从下往上短距离滑动*/
@-webkit-keyframes slideInUp { 0% {
-webkit-transform:translateY(100%);
transform:translateY(100%);
visibility:visible
}
100% {
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@keyframes slideInUp { 0% {
-webkit-transform:translateY(100%);
-ms-transform:translateY(100%);
transform:translateY(100%);
visibility:visible
}
100% {
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0)
}
}
.slideInUp { -webkit-animation-name:slideInUp; animation-name:slideInUp }
/*slideOutDown 从上往下短距离滑动，最后瞬间恢复*/
@-webkit-keyframes slideOutDown { 0% {
-webkit-transform:translateY(0);
transform:translateY(0)
}
100% {
visibility:hidden;
-webkit-transform:translateY(100%);
transform:translateY(100%)
}
}
@keyframes slideOutDown { 0% {
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0)
}
100% {
visibility:hidden;
-webkit-transform:translateY(100%);
-ms-transform:translateY(100%);
transform:translateY(100%)
}
}
.slideOutDown { -webkit-animation-name:slideOutDown; animation-name:slideOutDown }
/*slideOutLeft 从右往左短距离滑动，最后瞬间恢复*/
@-webkit-keyframes slideOutLeft { 0% {
-webkit-transform:translateX(0);
transform:translateX(0)
}
100% {
visibility:hidden;
-webkit-transform:translateX(-100%);
transform:translateX(-100%)
}
}
@keyframes slideOutLeft { 0% {
-webkit-transform:translateX(0);
-ms-transform:translateX(0);
transform:translateX(0)
}
100% {
visibility:hidden;
-webkit-transform:translateX(-100%);
-ms-transform:translateX(-100%);
transform:translateX(-100%)
}
}
.slideOutLeft { -webkit-animation-name:slideOutLeft; animation-name:slideOutLeft }
/*slideOutRight 从左往右短距离滑动，最后瞬间恢复*/
@-webkit-keyframes slideOutRight { 0% {
-webkit-transform:translateX(0);
transform:translateX(0)
}
100% {
visibility:hidden;
-webkit-transform:translateX(100%);
transform:translateX(100%)
}
}
@keyframes slideOutRight { 0% {
-webkit-transform:translateX(0);
-ms-transform:translateX(0);
transform:translateX(0)
}
100% {
visibility:hidden;
-webkit-transform:translateX(100%);
-ms-transform:translateX(100%);
transform:translateX(100%)
}
}
.slideOutRight { -webkit-animation-name:slideOutRight; animation-name:slideOutRight }
/*slideOutUp 从下往上短距离滑动，最后瞬间恢复*/
@-webkit-keyframes slideOutUp { 0% {
-webkit-transform:translateY(0);
transform:translateY(0)
}
100% {
visibility:hidden;
-webkit-transform:translateY(-100%);
transform:translateY(-100%)
}
}
@keyframes slideOutUp { 0% {
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0)
}
100% {
visibility:hidden;
-webkit-transform:translateY(-100%);
-ms-transform:translateY(-100%);
transform:translateY(-100%)
}
}
.slideOutUp { -webkit-animation-name:slideOutUp; animation-name:slideOutUp }
/*spin 顺时针360度转一圈*/
@-webkit-keyframes spin { 0 {
-webkit-transform:rotate(0)
}
8.33333333% {
-webkit-transform:rotate(30deg)
}
16.66666667% {
-webkit-transform:rotate(60deg)
}
25% {
-webkit-transform:rotate(90deg)
}
33.33333333% {
-webkit-transform:rotate(120deg)
}
41.66666667% {
-webkit-transform:rotate(150deg)
}
50% {
-webkit-transform:rotate(180deg)
}
58.33333333% {
-webkit-transform:rotate(210deg)
}
66.66666667% {
-webkit-transform:rotate(240deg)
}
75% {
-webkit-transform:rotate(270deg)
}
83.33333333% {
-webkit-transform:rotate(300deg)
}
91.66666667% {
-webkit-transform:rotate(330deg)
}
100% {
-webkit-transform:rotate(360deg)
}
}
@keyframes spin { 0 {
transform:rotate(0)
}
8.33333333% {
transform:rotate(30deg)
}
16.66666667% {
transform:rotate(60deg)
}
25% {
transform:rotate(90deg)
}
33.33333333% {
transform:rotate(120deg)
}
41.66666667% {
transform:rotate(150deg)
}
50% {
transform:rotate(180deg)
}
58.33333333% {
transform:rotate(210deg)
}
66.66666667% {
transform:rotate(240deg)
}
75% {
transform:rotate(270deg)
}
83.33333333% {
transform:rotate(300deg)
}
91.66666667% {
transform:rotate(330deg)
}
100% {
transform:rotate(360deg)
}
}
.spin { -webkit-animation-name:spin; animation-name:spin }
/*xyUp 往上抬*/
@-webkit-keyframes xyUp { 0% {
-webkit-transform:none;
transform:none;
}
100% {
-webkit-transform:translate3d(0, -4%, 0);
transform:translate3d(0, -4%, 0);
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
}
@keyframes xyUp { 0% {
-webkit-transform:none;
-ms-transform:none;
transform:none;
}
100% {
-webkit-transform:translate3d(0, -4%, 0);
-ms-transform:translate3d(0, -4%, 0);
transform:translate3d(0, -4%, 0);
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
}
.xyUp { -webkit-animation-name:xyUp; animation-name:xyUp }
/*xyDown 往下降*/
@-webkit-keyframes xyDown { 0% {
-webkit-transform:translate3d(0, -4%, 0);
transform:translate3d(0, -4%, 0);
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
100% {
-webkit-transform:none;
transform:none;
}
}
@keyframes xyDown { 0% {
-webkit-transform:translate3d(0, -4%, 0);
-ms-transform:translate3d(0, -4%, 0);
transform:translate3d(0, -4%, 0);
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
100% {
-webkit-transform:none;
-ms-transform:none;
transform:none;
}
}
.xyDown { -webkit-animation-name:xyDown; animation-name:xyDown }
/*xyUpShadow 往上抬并出现阴影*/
@-webkit-keyframes xyUpShadow { 0% {
-webkit-transform:none;
transform:none;
}
100% {
-webkit-transform:translate3d(0, -5%, 0);
transform:translate3d(0, -5%, 0);
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}
}
@keyframes xyUpShadow { 0% {
-webkit-transform:none;
-ms-transform:none;
transform:none;
}
100% {
-webkit-transform:translate3d(0, -5%, 0);
-ms-transform:translate3d(0, -5%, 0);
transform:translate3d(0, -5%, 0);
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}
}
.xyUpShadow { -webkit-animation-name:xyUpShadow; animation-name:xyUpShadow }
/*xyDownShadow 往下降并且阴影消失*/
@-webkit-keyframes xyDownShadow { 0% {
-webkit-transform:translate3d(0, -5%, 0);
transform:translate3d(0, -5%, 0);
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}
100% {
-webkit-transform:none;
transform:none;
}
}
@keyframes xyDownShadow { 0% {
-webkit-transform:translate3d(0, -5%, 0);
-ms-transform:translate3d(0, -5%, 0);
transform:translate3d(0, -5%, 0);
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}
100% {
-webkit-transform:none;
-ms-transform:none;
transform:none;
}
}
.xyDownShadow { -webkit-animation-name:xyDownShadow; animation-name:xyDownShadow }
/*xyZoomOut 从近到远(也可理解为从大到小)*/
@-webkit-keyframes xyZoomOut { 0% {
opacity:0;
-webkit-transform:scale3d(1.5, 1.5, 1.5);
transform:scale3d(1.5, 1.5, 1.5);
}
25% {
  opacity:0;
}
100% {
  opacity:1;
}
}
@keyframes xyZoomOut { 0% {
opacity:0;
-webkit-transform:scale3d(1.5, 1.5, 1.5);
-ms-transform:scale3d(1.5, 1.5, 1.5);
transform:scale3d(1.5, 1.5, 1.5);
}
25% {
  opacity:0;
}
100% {
  opacity:1;
}
}
.xyZoomOut { -webkit-animation-name:xyZoomOut; animation-name:xyZoomOut }
/*xyZoomInLeft 从左往右，从小到大，从隐藏到显示*/
@-webkit-keyframes xyZoomInLeft { 0% {
opacity:0;
-webkit-transform:scale3d(.4, .1, .1) translate3d(-100%, 0, 0);
transform:scale3d(.4, .1, .1) translate3d(-100%, 0, 0);
}

100% {
opacity:1;
-webkit-transform:scale3d(1, 1, 1) translate3d(0, 0, 0);
transform:scale3d(1, 1, 1) translate3d(0, 0, 0);
-webkit-animation-timing-function:cubic-bezier(0.175, .885, .32, 1);
animation-timing-function:cubic-bezier(0.175, .885, .32, 1)
}
}
@keyframes xyZoomInLeft { 0% {
opacity:0;
-webkit-transform:scale3d(.4, .1, .1) translate3d(-100%, 0, 0);
-ms-transform:scale3d(.4, .1, .1) translate3d(-100%, 0, 0);
transform:scale3d(.4, .1, .1) translate3d(-100%, 0, 0);
}

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

}

/*中基动画  发展历程*/
@-webkit-keyframes fzlc_cover {
  0% {width:100%; opacity:1;}
  99.99% {opacity:1;}
  100% {width:0; opacity:0;}
}
@keyframes fzlc_cover {
  0% {width:100%; opacity:1;}
  99.99% {opacity:1;}
  100% {width:0; opacity:0;}
}
.fzlc_cover { -webkit-animation-name:fzlc_cover; animation-name:fzlc_cover }
/*xyFadeOpacity 从隐藏到显示*/
@-webkit-keyframes xyFadeOpacity { 0% {
opacity:0
}
30% {
opacity:1
}
70% {
opacity:1
}
100% {
opacity:0
}
}
@keyframes xyFadeOpacity { 0% {
opacity:0
}
30% {
opacity:1
}
70% {
opacity:1
}
100% {
opacity:0
}
}
.xyFadeOpacity { -webkit-animation-name:xyFadeOpacity; animation-name:xyFadeOpacity }
/*xyFlash 原地闪两下*/
@-webkit-keyframes xyFlash { 0%, 100% {
opacity:1
}
50% {
opacity:0
}
}
@keyframes xyFlash { 0%, 100% {
opacity:1
}
50% {
opacity:0
}
}
.xyFlash { -webkit-animation-name:xyFlash; animation-name:xyFlash }
/*xyZoomIn 从远到近(也可理解成从小到大)并从隐藏到显示*/
@-webkit-keyframes xyZoomIn { 0% {
opacity:0;
-webkit-transform: scale(0.1,0.1) translate3d(0, 100%, -4000px);
transform: translate3d(0, 100%, -4000px);
}
100% {
opacity:1;
-webkit-transform: scale(1,1) translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes xyZoomIn { 0% {
opacity:0;
transform: translate3d(0, 100%, -4000px);
-ms-transform: translate3d(0, 100%, -4000px);
-moz-transform: translate3d(0, 100%, -4000px);
-webkit-transform: scale(0.1,0.1) translate3d(0, 100%, -4000px);
-o-transform: translate3d(0, 100%, -4000px);
}
100% {
opacity:1;
transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: scale(1,1) translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
}
}
.xyZoomIn { -webkit-animation-name:xyZoomIn; animation-name:xyZoomIn }
/*xyEnlarge 3D效果，类似于变大变模糊一下最后恢复*/
@-webkit-keyframes xyEnlarge { 0% {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
100% {
-webkit-transform:scale3d(1.05, 1.05, 1.05);
transform:scale3d(1.05, 1.05, 1.05)
}
}
@keyframes xyEnlarge { 0% {
-webkit-transform:scale3d(1, 1, 1);
-ms-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
100% {
-webkit-transform:scale3d(1.05, 1.05, 1.05);
-ms-transform:scale3d(1.05, 1.05, 1.05);
transform:scale3d(1.05, 1.05, 1.05)
}
}
.xyEnlarge { -webkit-animation-name:xyEnlarge; animation-name:xyEnlarge }
/*xyNarrow 3D效果，类似于变大变模糊一下最后恢复*/
@-webkit-keyframes xyNarrow { 0% {
-webkit-transform:scale3d(1.05, 1.05, 1.05);
transform:scale3d(1.05, 1.05, 1.05)
}
100% {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}
@keyframes xyNarrow { 0% {
-webkit-transform:scale3d(1.05, 1.05, 1.05);
-ms-transform:scale3d(1.05, 1.05, 1.05);
transform:scale3d(1.05, 1.05, 1.05)
}
100% {
-webkit-transform:scale3d(1, 1, 1);
-ms-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}
.xyNarrow { -webkit-animation-name:xyNarrow; animation-name:xyNarrow }
/*xyHeightB*/
@-webkit-keyframes xyHeightB { 0% {
height: 0;
}
100% {
height: 21px;
}
}
@keyframes xyHeightB { 0% {
height: 0;
}
100% {
height: 21px;
}
}
.xyHeightB { -webkit-animation-name:xyHeightB; animation-name:xyHeightB }
/*xyHeightS*/
@-webkit-keyframes xyHeightS { 0% {
height: 21px;
}
100% {
height: 0;
}
}
@keyframes xyHeightS { 0% {
height: 21px;
}
100% {
height: 0;
}
}
.xyHeightS { -webkit-animation-name:xyHeightS; animation-name:xyHeightS }