animate.css源码

animate.css源码，关于如何使用animate.css，可参考 vue+ts或者react+ts如何使用animate.css。

/*!动画属性：animation-name:动画名称animation-duration:动画时间animation-timing-function:动画的速度曲线animation-delay:动画延迟animation-iteration-count:动画播放次数animation-direction:是否轮流反响播放动画animation: name duration timing-function delay iteration-count direction;其中：名称和时长是必须的；*/@keyframes bounce {from,20%,53%,80%,to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform: translate3d(0, 0, 0);/* 跳回到原点*/transform: translate3d(0, 0, 0);}40%,43% {-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform: translate3d(0, -30px, 0);/* 向上跳30*/transform: translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);-webkit-transform: translate3d(0, -15px, 0);/* 向上跳15*/transform: translate3d(0, -15px, 0);}90% {-webkit-transform: translate3d(0, -4px, 0);/* 向上跳4*/transform: translate3d(0, -4px, 0);}
}.bounce {-webkit-animation-name: bounce;animation-name: bounce;-webkit-transform-origin: center bottom;transform-origin: center bottom;/*animation:bounce 2s ;*/
}@keyframes flash {0%,50%,100% {opacity: 1;}25%,75% {opacity: 0;}
}.flash {-webkit-animation-name: flash;animation-name: flash;
}@keyframes pulse { /*变大变小*/from {transform: scale3d(1, 1, 1);}50% {transform: scale3d(1.05, 1.05, 1.05);}to {transform: scale3d(1, 1, 1);}
}
.pulse {-webkit-animation-name: pulse;animation-name: pulse;
}@keyframes rubberBand {/*橡皮经：y变窄，x变窄循环，然后恢复正常*/from {transform: scale3d(1, 1, 1);}30% {transform: scale3d(1.25, 0.75, 1);}40% {transform: scale3d(0.75, 1.25, 1);}50% {transform: scale3d(1.15, 0.85, 1);}65% {transform: scale3d(0.95, 1.05, 1);}75% {transform: scale3d(1.05, 0.95, 1);}to {transform: scale3d(1, 1, 1);}
}
.rubberBand {animation-name: rubberBand;
}@keyframes shake {from,to {transform: translate3d(0, 0, 0);}10%,30%,50%,70%,90% {transform: translate3d(-10px, 0, 0);}20%,40%,60%,80% {-webkit-transform: translate3d(10px, 0, 0);transform: translate3d(10px, 0, 0);}
}.shake {-webkit-animation-name: shake;animation-name: shake;
}@keyframes headShake {0% {transform: translateX(0);}6.5% {transform: translateX(-6px) rotateY(-9deg);}18.5% {-webkit-transform: translateX(5px) rotateY(7deg);transform: translateX(5px) rotateY(7deg);}31.5% {-webkit-transform: translateX(-3px) rotateY(-5deg);transform: translateX(-3px) rotateY(-5deg);}43.5% {-webkit-transform: translateX(2px) rotateY(3deg);transform: translateX(2px) rotateY(3deg);}50% {-webkit-transform: translateX(0);transform: translateX(0);}
}.headShake {-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;-webkit-animation-name: headShake;animation-name: headShake;
}@keyframes swing {/*围绕一个点左右荡秋千摆动：rotate3d(x,y,z,angle)围绕z轴进行旋转*/20% {transform: rotate3d(0, 0, 1, 15deg);}40% {transform: rotate3d(0, 0, 1, -10deg);}60% {transform: rotate3d(0, 0, 1, 5deg);}80% {transform: rotate3d(0, 0, 1, -5deg);}to {transform: rotate3d(0, 0, 1, 0deg);}
}.swing {-webkit-transform-origin: top center;transform-origin: top center;-webkit-animation-name: swing;animation-name: swing;
}@keyframes tada {/*缩小，左旋转---放大，右旋转--恢复正常*/from {transform: scale3d(1, 1, 1);}10%,20% {transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);}30%,50%,70%,90% {transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);}40%,60%,80% {transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);}to {transform: scale3d(1, 1, 1);}
}
.tada {animation-name: tada;
}@keyframes wobble {/*晃动：向左移动，绕z轴向左旋转 ----向右移动，绕z轴向右旋转*/from {transform: translate3d(0, 0, 0);}15% {transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);}30% {transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);}45% {transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);}60% {transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);}75% {transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);}to {transform: translate3d(0, 0, 0);}
}.wobble {-webkit-animation-name: wobble;animation-name: wobble;
}@keyframes jello {/*凝胶物：倾斜，左右交替*/from,11.1%,to {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}22.2% {-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);transform: skewX(-12.5deg) skewY(-12.5deg);}33.3% {-webkit-transform: skewX(6.25deg) skewY(6.25deg);transform: skewX(6.25deg) skewY(6.25deg);}44.4% {-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);transform: skewX(-3.125deg) skewY(-3.125deg);}55.5% {-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);transform: skewX(1.5625deg) skewY(1.5625deg);}66.6% {-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);transform: skewX(-0.78125deg) skewY(-0.78125deg);}77.7% {-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);transform: skewX(0.390625deg) skewY(0.390625deg);}88.8% {-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}
}.jello {-webkit-animation-name: jello;animation-name: jello;-webkit-transform-origin: center;transform-origin: center;
}@keyframes heartBeat {/*心跳：变大-变小交替*/0% {-webkit-transform: scale(1);transform: scale(1);}14% {-webkit-transform: scale(1.3);transform: scale(1.3);}28% {-webkit-transform: scale(1);transform: scale(1);}42% {-webkit-transform: scale(1.3);transform: scale(1.3);}70% {-webkit-transform: scale(1);transform: scale(1);}
}.heartBeat {-webkit-animation-name: heartBeat;animation-name: heartBeat;-webkit-animation-duration: 1.3s;animation-duration: 1.3s;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;
}@keyframes bounceIn {from,20%,40%,60%,80%,to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0% {opacity: 0;-webkit-transform: scale3d(0.3, 0.3, 0.3);transform: scale3d(0.3, 0.3, 0.3);}20% {-webkit-transform: scale3d(1.1, 1.1, 1.1);transform: scale3d(1.1, 1.1, 1.1);}40% {-webkit-transform: scale3d(0.9, 0.9, 0.9);transform: scale3d(0.9, 0.9, 0.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(0.97, 0.97, 0.97);transform: scale3d(0.97, 0.97, 0.97);}to {opacity: 1;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
}.bounceIn {-webkit-animation-duration: 0.75s;animation-duration: 0.75s;-webkit-animation-name: bounceIn;animation-name: bounceIn;
}@keyframes bounceInDown {/*向下，向上循环*/from,60%,75%,90%,to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function: cubic-bezier(0.215, 0.61, 0.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);}to {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}.bounceInDown {-webkit-animation-name: bounceInDown;animation-name: bounceInDown;
}@keyframes bounceInLeft {from,60%,75%,90%,to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function: cubic-bezier(0.215, 0.61, 0.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);}to {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}.bounceInLeft {-webkit-animation-name: bounceInLeft;animation-name: bounceInLeft;
}@keyframes bounceInRight {from,60%,75%,90%,to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}from {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);}to {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}.bounceInRight {-webkit-animation-name: bounceInRight;animation-name: bounceInRight;
}@keyframes bounceInUp {from,60%,75%,90%,to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}from {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);}to {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}.bounceInUp {-webkit-animation-name: bounceInUp;animation-name: bounceInUp;
}@keyframes bounceOut {/*小--大--小：最后透明度为0*/20% {-webkit-transform: scale3d(0.9, 0.9, 0.9);transform: scale3d(0.9, 0.9, 0.9);}50%,55% {opacity: 1;-webkit-transform: scale3d(1.1, 1.1, 1.1);transform: scale3d(1.1, 1.1, 1.1);}to {opacity: 0;-webkit-transform: scale3d(0.3, 0.3, 0.3);transform: scale3d(0.3, 0.3, 0.3);}
}.bounceOut {-webkit-animation-duration: 0.75s;animation-duration: 0.75s;-webkit-animation-name: bounceOut;animation-name: bounceOut;
}@keyframes bounceOutDown {/*向下，向上，再直接下去：透明度为0*/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);}to {opacity: 0;-webkit-transform: translate3d(0, 2000px, 0);transform: translate3d(0, 2000px, 0);}
}.bounceOutDown {-webkit-animation-name: bounceOutDown;animation-name: bounceOutDown;
}@keyframes bounceOutLeft {/*x轴向右一点，再直接向左，透明度变为0*/20% {opacity: 1;-webkit-transform: translate3d(20px, 0, 0);transform: translate3d(20px, 0, 0);}to {opacity: 0;-webkit-transform: translate3d(-2000px, 0, 0);transform: translate3d(-2000px, 0, 0);}
}.bounceOutLeft {-webkit-animation-name: bounceOutLeft;animation-name: bounceOutLeft;
}@keyframes bounceOutRight {20% {opacity: 1;-webkit-transform: translate3d(-20px, 0, 0);transform: translate3d(-20px, 0, 0);}to {opacity: 0;-webkit-transform: translate3d(2000px, 0, 0);transform: translate3d(2000px, 0, 0);}
}.bounceOutRight {-webkit-animation-name: bounceOutRight;animation-name: bounceOutRight;
}@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);}to {opacity: 0;-webkit-transform: translate3d(0, -2000px, 0);transform: translate3d(0, -2000px, 0);}
}.bounceOutUp {-webkit-animation-name: bounceOutUp;animation-name: bounceOutUp;
}@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}
}.fadeIn {-webkit-animation-name: fadeIn;animation-name: fadeIn;
}@keyframes fadeInDown {from {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}.fadeInDown {-webkit-animation-name: fadeInDown;animation-name: fadeInDown;
}@keyframes fadeInDownBig {from {opacity: 0;-webkit-transform: translate3d(0, -2000px, 0);transform: translate3d(0, -2000px, 0);}to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}.fadeInDownBig {-webkit-animation-name: fadeInDownBig;animation-name: fadeInDownBig;
}@keyframes fadeInLeft {from {opacity: 0;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}.fadeInLeft {-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft;
}@keyframes fadeInLeftBig {from {opacity: 0;-webkit-transform: translate3d(-2000px, 0, 0);transform: translate3d(-2000px, 0, 0);}to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}.fadeInLeftBig {-webkit-animation-name: fadeInLeftBig;animation-name: fadeInLeftBig;
}@keyframes fadeInRight {from {opacity: 0;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}.fadeInRight {-webkit-animation-name: fadeInRight;animation-name: fadeInRight;
}@keyframes fadeInRightBig {from {opacity: 0;-webkit-transform: translate3d(2000px, 0, 0);transform: translate3d(2000px, 0, 0);}to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}.fadeInRightBig {-webkit-animation-name: fadeInRightBig;animation-name: fadeInRightBig;
}@keyframes fadeInUp {from {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}.fadeInUp {-webkit-animation-name: fadeInUp;animation-name: fadeInUp;
}@-webkit-keyframes fadeInUpBig {from {opacity: 0;-webkit-transform: translate3d(0, 2000px, 0);transform: translate3d(0, 2000px, 0);}to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}@keyframes fadeInUpBig {from {opacity: 0;-webkit-transform: translate3d(0, 2000px, 0);transform: translate3d(0, 2000px, 0);}to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}.fadeInUpBig {-webkit-animation-name: fadeInUpBig;animation-name: fadeInUpBig;
}@-webkit-keyframes fadeOut {from {opacity: 1;}to {opacity: 0;}
}@keyframes fadeOut {from {opacity: 1;}to {opacity: 0;}
}.fadeOut {-webkit-animation-name: fadeOut;animation-name: fadeOut;
}@-webkit-keyframes fadeOutDown {from {opacity: 1;}to {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
}@keyframes fadeOutDown {from {opacity: 1;}to {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
}.fadeOutDown {-webkit-animation-name: fadeOutDown;animation-name: fadeOutDown;
}@-webkit-keyframes fadeOutDownBig {from {opacity: 1;}to {opacity: 0;-webkit-transform: translate3d(0, 2000px, 0);transform: translate3d(0, 2000px, 0);}
}@keyframes fadeOutDownBig {from {opacity: 1;}to {opacity: 0;-webkit-transform: translate3d(0, 2000px, 0);transform: translate3d(0, 2000px, 0);}
}.fadeOutDownBig {-webkit-animation-name: fadeOutDownBig;animation-name: fadeOutDownBig;
}@-webkit-keyframes fadeOutLeft {from {opacity: 1;}to {opacity: 0;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
}@keyframes fadeOutLeft {from {opacity: 1;}to {opacity: 0;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
}.fadeOutLeft {-webkit-animation-name: fadeOutLeft;animation-name: fadeOutLeft;
}@-webkit-keyframes fadeOutLeftBig {from {opacity: 1;}to {opacity: 0;-webkit-transform: translate3d(-2000px, 0, 0);transform: translate3d(-2000px, 0, 0);}
}@keyframes fadeOutLeftBig {from {opacity: 1;}to {opacity: 0;-webkit-transform: translate3d(-2000px, 0, 0);transform: translate3d(-2000px, 0, 0);}
}.fadeOutLeftBig {-webkit-animation-name: fadeOutLeftBig;animation-name: fadeOutLeftBig;
}@-webkit-keyframes fadeOutRight {from {opacity: 1;}to {opacity: 0;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}
}@keyframes fadeOutRight {from {opacity: 1;}to {opacity: 0;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}
}.fadeOutRight {-webkit-animation-name: fadeOutRight;animation-name: fadeOutRight;
}@-webkit-keyframes fadeOutRightBig {from {opacity: 1;}to {opacity: 0;-webkit-transform: translate3d(2000px, 0, 0);transform: translate3d(2000px, 0, 0);}
}@keyframes fadeOutRightBig {from {opacity: 1;}to {opacity: 0;-webkit-transform: translate3d(2000px, 0, 0);transform: translate3d(2000px, 0, 0);}
}.fadeOutRightBig {-webkit-animation-name: fadeOutRightBig;animation-name: fadeOutRightBig;
}@-webkit-keyframes fadeOutUp {from {opacity: 1;}to {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}
}@keyframes fadeOutUp {from {opacity: 1;}to {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}
}.fadeOutUp {-webkit-animation-name: fadeOutUp;animation-name: fadeOutUp;
}@-webkit-keyframes fadeOutUpBig {from {opacity: 1;}to {opacity: 0;-webkit-transform: translate3d(0, -2000px, 0);transform: translate3d(0, -2000px, 0);}
}@keyframes fadeOutUpBig {from {opacity: 1;}to {opacity: 0;-webkit-transform: translate3d(0, -2000px, 0);transform: translate3d(0, -2000px, 0);}
}.fadeOutUpBig {-webkit-animation-name: fadeOutUpBig;animation-name: fadeOutUpBig;
}@keyframes flip {from {-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)rotate3d(0, 1, 0, -360deg);transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);-webkit-animation-timing-function: ease-out;animation-timing-function: ease-out;}40% {-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)rotate3d(0, 1, 0, -190deg);transform: perspective(400px) scale3d(1, 1, 1) 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) scale3d(1, 1, 1) translate3d(0, 0, 150px)rotate3d(0, 1, 0, -170deg);transform: perspective(400px) scale3d(1, 1, 1) 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(0.95, 0.95, 0.95) translate3d(0, 0, 0)rotate3d(0, 1, 0, 0deg);transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)rotate3d(0, 1, 0, 0deg);-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}to {-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)rotate3d(0, 1, 0, 0deg);transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}
}.animated.flip {-webkit-backface-visibility: visible;backface-visibility: visible;-webkit-animation-name: flip;animation-name: flip;
}@-webkit-keyframes flipInX {from {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);transform: perspective(400px) rotate3d(1, 0, 0, 90deg);-webkit-animation-timing-function: ease-in;animation-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-animation-timing-function: ease-in;animation-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);}to {-webkit-transform: perspective(400px);transform: perspective(400px);}
}@keyframes flipInX {from {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);transform: perspective(400px) rotate3d(1, 0, 0, 90deg);-webkit-animation-timing-function: ease-in;animation-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-animation-timing-function: ease-in;animation-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);}to {-webkit-transform: perspective(400px);transform: perspective(400px);}
}.flipInX {-webkit-backface-visibility: visible !important;backface-visibility: visible !important;-webkit-animation-name: flipInX;animation-name: flipInX;
}@keyframes flipInY {from {-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);transform: perspective(400px) rotate3d(0, 1, 0, 90deg);-webkit-animation-timing-function: ease-in;animation-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-animation-timing-function: ease-in;animation-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);}to {-webkit-transform: perspective(400px);transform: perspective(400px);}
}.flipInY {-webkit-backface-visibility: visible !important;backface-visibility: visible !important;-webkit-animation-name: flipInY;animation-name: flipInY;
}@keyframes flipOutX {from {-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;}to {-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);transform: perspective(400px) rotate3d(1, 0, 0, 90deg);opacity: 0;}
}.flipOutX {-webkit-animation-duration: 0.75s;animation-duration: 0.75s;-webkit-animation-name: flipOutX;animation-name: flipOutX;-webkit-backface-visibility: visible !important;backface-visibility: visible !important;
}@keyframes flipOutY {from {-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;}to {-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);transform: perspective(400px) rotate3d(0, 1, 0, 90deg);opacity: 0;}
}.flipOutY {-webkit-animation-duration: 0.75s;animation-duration: 0.75s;-webkit-backface-visibility: visible !important;backface-visibility: visible !important;-webkit-animation-name: flipOutY;animation-name: flipOutY;
}@keyframes lightSpeedIn {from {-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);}to {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}.lightSpeedIn {-webkit-animation-name: lightSpeedIn;animation-name: lightSpeedIn;-webkit-animation-timing-function: ease-out;animation-timing-function: ease-out;
}@keyframes lightSpeedOut {/*向右移动，倾斜，透明度变为0*/from {opacity: 1;}to {-webkit-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;
}@keyframes rotateIn {/*围绕圆点旋转-200度，透明度0--1*/from {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate3d(0, 0, 1, -200deg);transform: rotate3d(0, 0, 1, -200deg);opacity: 0;}to {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);opacity: 1;}
}.rotateIn {-webkit-animation-name: rotateIn;animation-name: rotateIn;
}@keyframes rotateInDownLeft {/*围绕左下角z轴旋转-45度，*/from {-webkit-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate3d(0, 0, 1, -45deg);transform: rotate3d(0, 0, 1, -45deg);opacity: 0;}to {-webkit-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);opacity: 1;}
}.rotateInDownLeft {-webkit-animation-name: rotateInDownLeft;animation-name: rotateInDownLeft;
}@keyframes rotateInDownRight {from {-webkit-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate3d(0, 0, 1, 45deg);transform: rotate3d(0, 0, 1, 45deg);opacity: 0;}to {-webkit-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);opacity: 1;}
}.rotateInDownRight {-webkit-animation-name: rotateInDownRight;animation-name: rotateInDownRight;
}@keyframes rotateInUpLeft {/*以左下角为旋转点，从下往上旋转*/from {-webkit-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate3d(0, 0, 1, 45deg);transform: rotate3d(0, 0, 1, 45deg);opacity: 0;}to {-webkit-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);opacity: 1;}
}.rotateInUpLeft {-webkit-animation-name: rotateInUpLeft;animation-name: rotateInUpLeft;
}@keyframes rotateInUpRight {from {-webkit-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate3d(0, 0, 1, -90deg);transform: rotate3d(0, 0, 1, -90deg);opacity: 0;}to {-webkit-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);opacity: 1;}
}.rotateInUpRight {-webkit-animation-name: rotateInUpRight;animation-name: rotateInUpRight;
}@keyframes rotateOut {from {-webkit-transform-origin: center;transform-origin: center;opacity: 1;}to {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate3d(0, 0, 1, 200deg);transform: rotate3d(0, 0, 1, 200deg);opacity: 0;}
}.rotateOut {-webkit-animation-name: rotateOut;animation-name: rotateOut;
}@keyframes rotateOutDownLeft {from {-webkit-transform-origin: left bottom;transform-origin: left bottom;opacity: 1;}to {-webkit-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate3d(0, 0, 1, 45deg);transform: rotate3d(0, 0, 1, 45deg);opacity: 0;}
}.rotateOutDownLeft {-webkit-animation-name: rotateOutDownLeft;animation-name: rotateOutDownLeft;
}@keyframes rotateOutDownRight {/*z轴，右下角，旋转45度，透明度1-0*/from {-webkit-transform-origin: right bottom;transform-origin: right bottom;opacity: 1;}to {-webkit-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate3d(0, 0, 1, -45deg);transform: rotate3d(0, 0, 1, -45deg);opacity: 0;}
}.rotateOutDownRight {-webkit-animation-name: rotateOutDownRight;animation-name: rotateOutDownRight;
}@keyframes rotateOutUpLeft {from {-webkit-transform-origin: left bottom;transform-origin: left bottom;opacity: 1;}to {-webkit-transform-origin: left bottom;transform-origin: left bottom;-webkit-transform: rotate3d(0, 0, 1, -45deg);transform: rotate3d(0, 0, 1, -45deg);opacity: 0;}
}.rotateOutUpLeft {-webkit-animation-name: rotateOutUpLeft;animation-name: rotateOutUpLeft;
}@keyframes rotateOutUpRight {from {-webkit-transform-origin: right bottom;transform-origin: right bottom;opacity: 1;}to {-webkit-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate3d(0, 0, 1, 90deg);transform: rotate3d(0, 0, 1, 90deg);opacity: 0;}
}.rotateOutUpRight {-webkit-animation-name: rotateOutUpRight;animation-name: rotateOutUpRight;
}@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;}to {-webkit-transform: translate3d(0, 700px, 0);transform: translate3d(0, 700px, 0);opacity: 0;}
}.hinge {-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-name: hinge;animation-name: hinge;
}@keyframes jackInTheBox {from {opacity: 0;-webkit-transform: scale(0.1) rotate(30deg);transform: scale(0.1) rotate(30deg);-webkit-transform-origin: center bottom;transform-origin: center bottom;}50% {-webkit-transform: rotate(-10deg);transform: rotate(-10deg);}70% {-webkit-transform: rotate(3deg);transform: rotate(3deg);}to {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}
}.jackInTheBox {-webkit-animation-name: jackInTheBox;animation-name: jackInTheBox;
}@keyframes rollIn {/*x轴从-100%运动到0，同时从-120度到0度*/from {opacity: 0;-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);}to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}.rollIn {-webkit-animation-name: rollIn;animation-name: rollIn;
}@keyframes rollOut {/*向右100%，旋转120度*/from {opacity: 1;}to {opacity: 0;-webkit-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;
}@keyframes zoomIn {/*缩放从0.3--1，透明度从0-1*/from {opacity: 0;-webkit-transform: scale3d(0.3, 0.3, 0.3);transform: scale3d(0.3, 0.3, 0.3);}50% {opacity: 1;}
}.zoomIn {-webkit-animation-name: zoomIn;animation-name: zoomIn;
}@keyframes zoomInDown {/*从上面掉下来，逐渐放大，*/from {opacity: 0;-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}60% {opacity: 1;-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}
}.zoomInDown {-webkit-animation-name: zoomInDown;animation-name: zoomInDown;
}@keyframes zoomInLeft {/*从左行邮，逐渐移动并变大*/from {opacity: 0;-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}60% {opacity: 1;-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}
}.zoomInLeft {-webkit-animation-name: zoomInLeft;animation-name: zoomInLeft;
}@keyframes zoomInRight {from {opacity: 0;-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}60% {opacity: 1;-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}
}.zoomInRight {-webkit-animation-name: zoomInRight;animation-name: zoomInRight;
}@keyframes zoomInUp {from {opacity: 0;-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}60% {opacity: 1;-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}
}.zoomInUp {-webkit-animation-name: zoomInUp;animation-name: zoomInUp;
}@keyframes zoomOut {/*缩小；收回去*/from {opacity: 1;}50% {opacity: 0;-webkit-transform: scale3d(0.3, 0.3, 0.3);transform: scale3d(0.3, 0.3, 0.3);}to {opacity: 0;}
}.zoomOut {-webkit-animation-name: zoomOut;animation-name: zoomOut;
}@keyframes zoomOutDown {/*先缩小，然后掉下去*/40% {opacity: 1;-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}to {opacity: 0;-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);-webkit-transform-origin: center bottom;transform-origin: center bottom;-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}
}.zoomOutDown {-webkit-animation-name: zoomOutDown;animation-name: zoomOutDown;
}@keyframes zoomOutLeft {/*向左，缩小，透明度0*/40% {opacity: 1;-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);}to {opacity: 0;-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);transform: scale(0.1) translate3d(-2000px, 0, 0);-webkit-transform-origin: left center;transform-origin: left center;}
}.zoomOutLeft {-webkit-animation-name: zoomOutLeft;animation-name: zoomOutLeft;
}@keyframes zoomOutRight {40% {opacity: 1;-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);}to {opacity: 0;-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);transform: scale(0.1) translate3d(2000px, 0, 0);-webkit-transform-origin: right center;transform-origin: right center;}
}.zoomOutRight {-webkit-animation-name: zoomOutRight;animation-name: zoomOutRight;
}@keyframes zoomOutUp {40% {opacity: 1;-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}to {opacity: 0;-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);-webkit-transform-origin: center bottom;transform-origin: center bottom;-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);}
}.zoomOutUp {-webkit-animation-name: zoomOutUp;animation-name: zoomOutUp;
}@keyframes slideInDown {from {-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);visibility: visible;}to {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}.slideInDown {-webkit-animation-name: slideInDown;animation-name: slideInDown;
}@keyframes slideInLeft {from {-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);visibility: visible;}to {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}.slideInLeft {-webkit-animation-name: slideInLeft;animation-name: slideInLeft;
}@keyframes slideInRight {from {-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);visibility: visible;}to {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}.slideInRight {-webkit-animation-name: slideInRight;animation-name: slideInRight;
}@keyframes slideInUp {/*y轴100%---0*/from {-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);visibility: visible;}to {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}.slideInUp {-webkit-animation-name: slideInUp;animation-name: slideInUp;
}@-webkit-keyframes slideOutDown {/*y轴0---100%*/from {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}to {visibility: hidden;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
}@keyframes slideOutDown {from {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}to {visibility: hidden;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
}.slideOutDown {-webkit-animation-name: slideOutDown;animation-name: slideOutDown;
}@keyframes slideOutLeft {from {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}to {visibility: hidden;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
}.slideOutLeft {-webkit-animation-name: slideOutLeft;animation-name: slideOutLeft;
}@keyframes slideOutRight {from {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}to {visibility: hidden;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}
}.slideOutRight {-webkit-animation-name: slideOutRight;animation-name: slideOutRight;
}@keyframes slideOutUp {from {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}to {visibility: hidden;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}
}.slideOutUp {-webkit-animation-name: slideOutUp;animation-name: slideOutUp;
}/*动画持续时间*/
.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}/*动画无限循环*/
.animated.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;
}
/*动画延时*/
.animated.delay-1s {-webkit-animation-delay: 1s;animation-delay: 1s;
}.animated.delay-2s {-webkit-animation-delay: 2s;animation-delay: 2s;
}.animated.delay-3s {-webkit-animation-delay: 3s;animation-delay: 3s;
}.animated.delay-4s {-webkit-animation-delay: 4s;animation-delay: 4s;
}.animated.delay-5s {-webkit-animation-delay: 5s;animation-delay: 5s;
}.animated.fast {-webkit-animation-duration: 800ms;animation-duration: 800ms;
}.animated.faster {-webkit-animation-duration: 500ms;animation-duration: 500ms;
}.animated.slow {-webkit-animation-duration: 2s;animation-duration: 2s;
}.animated.slower {-webkit-animation-duration: 3s;animation-duration: 3s;
}@media (prefers-reduced-motion) {.animated {-webkit-animation: unset !important;animation: unset !important;-webkit-transition: none !important;transition: none !important;}
}

animate.css源码相关推荐

  1. 阅读Skeleton.css源码，改善睡眠质量（尽管它只有419行代码）

    theme: smartblue 本文介绍 点赞就等于学会了! 如果本文对您有帮助,建议点赞收藏(点赞就等于学会了) Skeleton 源码一共只有 419 行(加上注释和换行),非常适合用来学习. ...

  2. JavaFX8 modena样式(css)源码

    转载自  JavaFX8 modena样式(css)源码 /* Modena This is the second generation theme for JavaFX after Caspian. ...

  3. php 彩色标签插件,zblog php 彩色标签CSS源码

    之前买了foxalt彩色标签插件,安装上来不管用,经过foxalt一番指导才明白,我的首页头部无彩色标签CSS,所以把单独的CSS发我然后调用才成功.下面是源码:.divColorful_Tags:a ...

  4. 购物车的功能——CSS源码

    里面所用到的图片资源统一都在"我的资源"里面,相对应的图片是" 购物车源码相关图片 "http://download.csdn.net/detail/qq_34 ...

  5. 当当网头部和尾部——CSS源码

    头部 @charset "utf-8"; /* CSS Document *//*网页头部导航样式开始*/ .header_top,.header_middle,.header_s ...

  6. web前端培训—css源码笔记（二）【爱创课堂】

    复习: css介绍:cascading style sheet 层叠样式表 引入css目的: 引入css好处: css组成:选择符 和 声明,声明包括 样式 和样式值 css引入方式 css文件本身不 ...

  7. css源码笔记（四）【爱创课堂专业前端培训】

    复习: 1.1 布局模型--前端培训机构 与盒子模型一样是最基础.最核心的东西,但是布局模型是从盒子模型基础上进行布局的. 流动模型flow.浮动模型float.层模型:绝对定位.固定定位 流动模型f ...

  8. 总结京东、天猫、王者荣耀PC端网站的CSS源码的初始化

    文章目录 1.京东 2.天猫 3.王者荣耀 4.总结 为什么需要CSS初始化? 不同的浏览器对有些标签的默认值是不同的,为了消除浏览器对HTML文本呈现的差异,考虑到浏览器的兼容性,我们需对 CSS进 ...

  9. 前端学习（1749）：前端调试值之如何查看js和css源码

最新文章

  1. CentOS7:Thrift的安装
  2. 宏基因组-微生物组文章目录索引(180401)
  3. java读取json配置文件_解决：java 读取 resources 下面的 json 文件
  4. 游戏的社交与延伸：怎样把玩家连结起来？
  5. SDNU 1029.巧分整数（斯特林数（改）dp）
  6. 检测客户pc电脑端VC++环境并安装
  7. Java DB中的Java用户定义类型（UDT）
  8. mysql oracle 表空间大小_Oracle各种空间大小及占用大小
  9. serialable 和 parcelable详解
  10. One Button Combat
  11. Linux下使用fdisk扩大分区容量
  12. 甲骨文中国数据库中心将落地，与微软数据库市场两家独大
  13. lmi克罗内克积 matlab_行正交矩阵的分层克罗内克积扩大法
  14. 转：如何破解超星打印页数限制
  15. 【Python】网络爬虫
  16. 08CMS之后台二次开发
  17. # Maven错误Error executing Maven
  18. C++经典算法题-循序搜寻法（使用卫兵）
  19. 如何做出好看的三维平面地图？
  20. 50台机器无盘服务器,以50台机器小吧为例看深度无盘快速布署的那些事.doc

热门文章

  1. MySQL从删库到跑路（5）：in and not
  2. ajax 提交list
  3. 新南威尔士大学纯硅量子计算机,全球首款纯硅量子计算机芯片在新南威尔士大学诞生...
  4. 无货源模式，跨境电商时代的风向标
  5. 互联网之父访华 称将把互联网送到整个太阳系
  6. 潘建中-632007060420
  7. B树B+树的原理和操作
  8. 浅谈XILINX FPGA CLB单元 汇总 (CLB、LUT、存储单元、Distributed RAM、移位寄存器、多路复用器、进位逻辑(Carry Logic))
  9. lighttpd+flash+PHP大文件上传，带上传进度显示
  10. Netty简单实现客户端与服务端收发消息