网易动漫效果

/* animation */
.a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;}
.a-fadein,.a-fadeinT,.a-fadeinR,.a-fadeinB,.a-fadeinL,.a-bouncein,.a-bounceinT,.a-bounceinR,.a-bounceinB,.a-bounceinL,.a-rotatein,.a-rotateinLT,.a-rotateinLB,.a-rotateinRT,.a-rotateinRB,.a-flipin,.a-flipinX,.a-flipinY{-webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards;}
.a-fadeout,.a-fadeoutT,.a-fadeoutR,.a-fadeoutB,.a-fadeoutL,.a-bounceout,.a-bounceoutT,.a-bounceoutR,.a-bounceoutB,.a-bounceoutL,.a-rotateout,.a-rotateoutLT,.a-rotateoutLB,.a-rotateoutRT,.a-rotateoutRB,.a-flipout,.a-flipoutX,.a-flipoutY{-webkit-animation:1s ease-in forwards;-moz-animation:1s ease-in forwards;-ms-animation:1s ease-in forwards;animation:1s ease-in forwards;}
/* 淡入 */
.a-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein;}
/* 淡入-从上 */
.a-fadeinT{-webkit-animation-name:fadeinT;-moz-animation-name:fadeinT;-ms-animation-name:fadeinT;animation-name:fadeinT;}
/* 淡入-从右 */
.a-fadeinR{-webkit-animation-name:fadeinR;-moz-animation-name:fadeinR;-ms-animation-name:fadeinR;animation-name:fadeinR;}
/* 淡入-从下 */
.a-fadeinB{-webkit-animation-name:fadeinB;-moz-animation-name:fadeinB;-ms-animation-name:fadeinB;animation-name:fadeinB;}
/* 淡入-从左 */
.a-fadeinL{-webkit-animation-name:fadeinL;-moz-animation-name:fadeinL;-ms-animation-name:fadeinL;animation-name:fadeinL;}
/* 淡出 */
.a-fadeout{-webkit-animation-name:fadeout;-moz-animation-name:fadeout;-ms-animation-name:fadeout;animation-name:fadeout;}
/* 淡出-向上 */
.a-fadeoutT{-webkit-animation-name:fadeoutT;-moz-animation-name:fadeoutT;-ms-animation-name:fadeoutT;animation-name:fadeoutT;}
/* 淡出-向右 */
.a-fadeoutR{-webkit-animation-name:fadeoutR;-moz-animation-name:fadeoutR;-ms-animation-name:fadeoutR;animation-name:fadeoutR;}
/* 淡出-向下 */
.a-fadeoutB{-webkit-animation-name:fadeoutB;-moz-animation-name:fadeoutB;-ms-animation-name:fadeoutB;animation-name:fadeoutB;}
/* 淡出-向左 */
.a-fadeoutL{-webkit-animation-name:fadeoutL;-moz-animation-name:fadeoutL;-ms-animation-name:fadeoutL;animation-name:fadeoutL;}
/* 弹跳 */
.a-bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-ms-animation-name:bounce;animation-name:bounce;}
/* 弹入 */
.a-bouncein{-webkit-animation-name:bouncein;-moz-animation-name:bouncein;-ms-animation-name:bouncein;animation-name:bouncein;}
/* 弹入-从上 */
.a-bounceinT{-webkit-animation-name:bounceinT;-moz-animation-name:bounceinT;-ms-animation-name:bounceinT;animation-name:bounceinT;}
/* 弹入-从右 */
.a-bounceinR{-webkit-animation-name:bounceinR;-moz-animation-name:bounceinR;-ms-animation-name:bounceinR;animation-name:bounceinR;}
/* 弹入-从下 */
.a-bounceinB{-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB;}
/* 弹入-从左 */
.a-bounceinL{-webkit-animation-name:bounceinL;-moz-animation-name:bounceinL;-ms-animation-name:bounceinL;animation-name:bounceinL;}
/* 弹出 */
.a-bounceout{-webkit-animation-name:bounceout;-moz-animation-name:bounceout;-ms-animation-name:bounceout;animation-name:bounceout;}
/* 弹出-向上 */
.a-bounceoutT{-webkit-animation-name:bounceoutT;-moz-animation-name:bounceoutT;-ms-animation-name:bounceoutT;animation-name:bounceoutT;}
/* 弹出-向右 */
.a-bounceoutR{-webkit-animation-name:bounceoutR;-moz-animation-name:bounceoutR;-ms-animation-name:bounceoutR;animation-name:bounceoutR;}
/* 弹出-向下 */
.a-bounceoutB{-webkit-animation-name:bounceoutB;-moz-animation-name:bounceoutB;-ms-animation-name:bounceoutB;animation-name:bounceoutB;}
/* 弹出-向左 */
.a-bounceoutL{-webkit-animation-name:bounceoutL;-moz-animation-name:bounceoutL;-ms-animation-name:bounceoutL;animation-name:bounceoutL;}
/* 转入 */
.a-rotatein{-webkit-animation-name:rotatein;-moz-animation-name:rotatein;-ms-animation-name:rotatein;animation-name:rotatein;}
/* 转入-从左上 */
.a-rotateinLT{-webkit-animation-name:rotateinLT;-moz-animation-name:rotateinLT;-ms-animation-name:rotateinLT;animation-name:rotateinLT;}
/* 转入-从左下 */
.a-rotateinLB{-webkit-animation-name:rotateinLB;-moz-animation-name:rotateinLB;-ms-animation-name:rotateinLB;animation-name:rotateinLB;}
/* 转入-从右上 */
.a-rotateinRT{-webkit-animation-name:rotateinRT;-moz-animation-name:rotateinRT;-ms-animation-name:rotateinRT;animation-name:rotateinRT;}
/* 转入-从右下*/
.a-rotateinRB{-webkit-animation-name:rotateinRB;-moz-animation-name:rotateinRB;-ms-animation-name:rotateinRB;animation-name:rotateinRB;}
/* 转出 */
.a-rotateout{-webkit-animation-name:rotateout;-moz-animation-name:rotateout;-ms-animation-name:rotateout;animation-name:rotateout;}
/* 转出-向左上 */
.a-rotateoutLT{-webkit-animation-name:rotateoutLT;-moz-animation-name:rotateoutLT;-ms-animation-name:rotateoutLT;animation-name:rotateoutLT;}
/* 转出-向左下 */
.a-rotateoutLB{-webkit-animation-name:rotateoutLB;-moz-animation-name:rotateoutLB;-ms-animation-name:rotateoutLB;animation-name:rotateoutLB;}
/* 转出-向右上 */
.a-rotateoutRT{-webkit-animation-name:rotateoutRT;-moz-animation-name:rotateoutRT;-ms-animation-name:rotateoutRT;animation-name:rotateoutRT;}
/* 转出-向右下 */
.a-rotateoutRB{-webkit-animation-name:rotateoutRB;-moz-animation-name:rotateoutRB;-ms-animation-name:rotateoutRB;animation-name:rotateoutRB;}
/* 翻转 */
.a-flip{-webkit-animation-name:flip;-moz-animation-name:flip;-ms-animation-name:flip;animation-name:flip;}
/* 翻入-X轴 */
.a-flipinX{-webkit-animation-name:flipinX;-moz-animation-name:flipinX;-ms-animation-name:flipinX;animation-name:flipinX;}
/* 翻入-Y轴 */
.a-flipin,.a-flipinY{-webkit-animation-name:flipinY;-moz-animation-name:flipinY;-ms-animation-name:flipinY;animation-name:flipinY;}
/* 翻出-X轴 */
.a-flipoutX{-webkit-animation-name:flipoutX;-moz-animation-name:flipoutX;-ms-animation-name:flipoutX;animation-name:flipoutX;}
/* 翻出-Y轴 */
.a-flipout,.a-flipoutY{-webkit-animation-name:flipoutY;-moz-animation-name:flipoutY;-ms-animation-name:flipoutY;animation-name:flipoutY;}
/* 闪烁 */
.a-flash{-webkit-animation-name:flash;-moz-animation-name:flash;-ms-animation-name:flash;animation-name:flash;}
/* 震颤 */
.a-shake{-webkit-animation-name:shake;-moz-animation-name:shake;-ms-animation-name:shake;animation-name:shake;}
/* 摇摆 */
.a-swing{-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;animation-name:swing;}
/* 摇晃 */
.a-wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-ms-animation-name:wobble;animation-name:wobble;}
/* 震铃 */
.a-ring{-webkit-animation-name:ring;-moz-animation-name:ring;-ms-animation-name:ring;animation-name:ring;}
/* define */
/* 淡入 */
@-webkit-keyframes fadein{
%{opacity:0;}
%{opacity:1;}
}
@-moz-keyframes fadein{
%{opacity:0;}
%{opacity:1;}
}
@-ms-keyframes fadein{
%{opacity:0;}
%{opacity:1;}
}
@keyframes fadein{
%{opacity:0;}
%{opacity:1;}
}
/* 淡入-从上 */
@-webkit-keyframes fadeinT{
%{opacity:0;-webkit-transform:translateY(-100px);}
%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes fadeinT{
%{opacity:0;-moz-transform:translateY(-100px);}
%{opacity:1;-moz-transform:translateY(0);}
}
@-ms-keyframes fadeinT{
%{opacity:0;-ms-transform:translateY(-100px);}
%{opacity:1;-ms-transform:translateY(0);}
}
@keyframes fadeinT{
%{opacity:0;transform:translateY(-100px);}
%{opacity:1;transform:translateY(0);}
}
/* 淡入-从右 */
@-webkit-keyframes fadeinR{
%{opacity:0;-webkit-transform:translateX(100px);}
%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeinR{
%{opacity:0;-moz-transform:translateX(100px);}
%{opacity:1;-moz-transform:translateX(0);}
}
@-ms-keyframes fadeinR{
%{opacity:0;-ms-transform:translateX(100px);}
%{opacity:1;-ms-transform:translateX(0);}
}
@keyframes fadeinR{
%{opacity:0;transform:translateX(100px);}
%{opacity:1;transform:translateX(0);}
}
/* 淡入-从下 */
@-webkit-keyframes fadeinB{
%{opacity:0;-webkit-transform:translateY(100px);}
%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes fadeinB{
%{opacity:0;-moz-transform:translateY(100px);}
%{opacity:1;-moz-transform:translateY(0);}
}
@-ms-keyframes fadeinB{
%{opacity:0;-ms-transform:translateY(100px);}
%{opacity:1;-ms-transform:translateY(0);}
}
@keyframes fadeinB{
%{opacity:0;transform:translateY(100px);}
%{opacity:1;transform:translateY(0);}
}
/* 淡入-从左 */
@-webkit-keyframes fadeinL{
%{opacity:0;-webkit-transform:translateX(-100px);}
%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeinL{
%{opacity:0;-moz-transform:translateX(-100px);}
%{opacity:1;-moz-transform:translateX(0);}
}
@-ms-keyframes fadeinL{
%{opacity:0;-ms-transform:translateX(-100px);}
%{opacity:1;-ms-transform:translateX(0);}
}
@keyframes fadeinL{
%{opacity:0;transform:translateX(-100px);}
%{opacity:1;transform:translateX(0);}
}
/* 淡出 */
@-webkit-keyframes fadeout{
%{opacity:1;}
%{opacity:0;}
}
@-moz-keyframes fadeout{
%{opacity:1;}
%{opacity:0;}
}
@-ms-keyframes fadeout{
%{opacity:1;}
%{opacity:0;}
}
@keyframes fadeout{
%{opacity:1;}
%{opacity:0;}
}
/* 淡出-向上 */
@-webkit-keyframes fadeoutT{
%{opacity:1;-webkit-transform:translateY(0);}
%{opacity:0;-webkit-transform:translateY(-100px);}
}
@-moz-keyframes fadeoutT{
%{opacity:1;-moz-transform:translateY(0);}
%{opacity:0;-moz-transform:translateY(-100px);}
}
@-ms-keyframes fadeoutT{
%{opacity:1;-ms-transform:translateY(0);}
%{opacity:0;-ms-transform:translateY(-100px);}
}
@keyframes fadeoutT{
%{opacity:1;transform:translateY(0);}
%{opacity:0;transform:translateY(-100px);}
}
/* 淡出-向右 */
@-webkit-keyframes fadeoutR{
%{opacity:1;-webkit-transform:translateX(0);}
%{opacity:0;-webkit-transform:translateX(100px);}
}
@-moz-keyframes fadeoutR{
%{opacity:1;-moz-transform:translateX(0);}
%{opacity:0;-moz-transform:translateX(100px);}
}
@-ms-keyframes fadeoutR{
%{opacity:1;-ms-transform:translateX(0);}
%{opacity:0;-ms-transform:translateX(100px);}
}
@keyframes fadeoutR{
%{opacity:1;transform:translateX(0);}
%{opacity:0;transform:translateX(100px);}
}
/* 淡出-向下 */
@-webkit-keyframes fadeoutB{
%{opacity:1;-webkit-transform:translateY(0);}
%{opacity:0;-webkit-transform:translateY(100px);}
}
@-moz-keyframes fadeoutB{
%{opacity:1;-moz-transform:translateY(0);}
%{opacity:0;-moz-transform:translateY(100px);}
}
@-ms-keyframes fadeoutB{
%{opacity:1;-ms-transform:translateY(0);}
%{opacity:0;-ms-transform:translateY(100px);}
}
@keyframes fadeoutB{
%{opacity:1;transform:translateY(0);}
%{opacity:0;transform:translateY(100px);}
}
/* 淡出-向左 */
@-webkit-keyframes fadeoutL{
%{opacity:1;-webkit-transform:translateX(0);}
%{opacity:0;-webkit-transform:translateX(-100px);}
}
@-moz-keyframes fadeoutL{
%{opacity:1;-moz-transform:translateX(0);}
%{opacity:0;-moz-transform:translateX(-100px);}
}
@-ms-keyframes fadeoutL{
%{opacity:1;-ms-transform:translateX(0);}
%{opacity:0;-ms-transform:translateX(-100px);}
}
@keyframes fadeoutL{
%{opacity:1;transform:translateX(0);}
%{opacity:0;transform:translateX(-100px);}
}
/* 弹跳 */
@-webkit-keyframes bounce{
%,20%,50%,80%,100%{-webkit-transform:translateY(0);}
%{-webkit-transform:translateY(-30px);}
%{-webkit-transform:translateY(-15px);}
}
@-moz-keyframes bounce{
%,20%,50%,80%,100%{-moz-transform:translateY(0);}
%{-moz-transform:translateY(-30px);}
%{-moz-transform:translateY(-15px);}
}
@-ms-keyframes bounce{
%,20%,50%,80%,100%{-ms-transform:translateY(0);}
%{-ms-transform:translateY(-30px);}
%{-ms-transform:translateY(-15px);}
}
@keyframes bounce{
%,20%,50%,80%,100%{transform:translateY(0);}
%{transform:translateY(-30px);}
%{transform:translateY(-15px);}
}
/* 弹入 */
@-webkit-keyframes bouncein{
%{opacity:0;-webkit-transform:scale(0.3);}
%{opacity:1;-webkit-transform:scale(1.05);}
%{-webkit-transform:scale(0.9);}
%{-webkit-transform:scale(1);}
}
@-moz-keyframes bouncein{
%{opacity:0;-moz-transform:scale(0.3);}
%{opacity:1;-moz-transform:scale(1.05);}
%{-moz-transform:scale(0.9);}
%{-moz-transform:scale(1);}
}
@-ms-keyframes bouncein{
%{opacity:0;-ms-transform:scale(0.3);}
%{opacity:1;-ms-transform:scale(1.05);}
%{-ms-transform:scale(0.9);}
%{-ms-transform:scale(1);}
}
@keyframes bouncein{
%{opacity:0;transform:scale(0.3);}
%{opacity:1;transform:scale(1.05);}
%{transform:scale(0.9);}
%{transform:scale(1);}
}
/* 弹入-从上 */
@-webkit-keyframes bounceinT{
%{opacity:0;-webkit-transform:translateY(-100px);}
%{opacity:1;-webkit-transform:translateY(30px);}
%{-webkit-transform:translateY(-10px);}
%{-webkit-transform:translateY(0);}
}
@-moz-keyframes bounceinT{
%{opacity:0;-moz-transform:translateY(-100px);}
%{opacity:1;-moz-transform:translateY(30px);}
%{-moz-transform:translateY(-10px);}
%{-moz-transform:translateY(0);}
}
@-ms-keyframes bounceinT{
%{opacity:0;-ms-transform:translateY(-100px);}
%{opacity:1;-ms-transform:translateY(30px);}
%{-ms-transform:translateY(-10px);}
%{-ms-transform:translateY(0);}
}
@keyframes bounceinT{
%{opacity:0;transform:translateY(-100px);}
%{opacity:1;transform:translateY(30px);}
%{transform:translateY(-10px);}
%{transform:translateY(0);}
}
/* 弹入-从右 */
@-webkit-keyframes bounceinR{
%{opacity:0;-webkit-transform:translateX(100px);}
%{opacity:1;-webkit-transform:translateX(-30px);}
%{-webkit-transform:translateX(10px);}
%{-webkit-transform:translateX(0);}
}
@-moz-keyframes bounceinR{
%{opacity:0;-moz-transform:translateX(100px);}
%{opacity:1;-moz-transform:translateX(-30px);}
%{-moz-transform:translateX(10px);}
%{-moz-transform:translateX(0);}
}
@-ms-keyframes bounceinR{
%{opacity:0;-ms-transform:translateX(100px);}
%{opacity:1;-ms-transform:translateX(-30px);}
%{-ms-transform:translateX(10px);}
%{-ms-transform:translateX(0);}
}
@keyframes bounceinR{
%{opacity:0;transform:translateX(100px);}
%{opacity:1;transform:translateX(-30px);}
%{transform:translateX(10px);}
%{transform:translateX(0);}
}
/* 弹入-从下 */
@-webkit-keyframes bounceinB{
%{opacity:0;-webkit-transform:translateY(100px);}
%{opacity:1;-webkit-transform:translateY(-30px);}
%{-webkit-transform:translateY(10px);}
%{-webkit-transform:translateY(0);}
}
@-moz-keyframes bounceinB{
%{opacity:0;-moz-transform:translateY(100px);}
%{opacity:1;-moz-transform:translateY(-30px);}
%{-moz-transform:translateY(10px);}
%{-moz-transform:translateY(0);}
}
@-ms-keyframes bounceinB{
%{opacity:0;-ms-transform:translateY(100px);}
%{opacity:1;-ms-transform:translateY(-30px);}
%{-ms-transform:translateY(10px);}
%{-ms-transform:translateY(0);}
}
@keyframes bounceinB{
%{opacity:0;transform:translateY(100px);}
%{opacity:1;transform:translateY(-30px);}
%{transform:translateY(10px);}
%{transform:translateY(0);}
}
/* 弹入-从左 */
@-webkit-keyframes bounceinL{
%{opacity:0;-webkit-transform:translateX(-100px);}
%{opacity:1;-webkit-transform:translateX(30px);}
%{-webkit-transform:translateX(-10px);}
%{-webkit-transform:translateX(0);}
}
@-moz-keyframes bounceinL{
%{opacity:0;-moz-transform:translateX(-100px);}
%{opacity:1;-moz-transform:translateX(30px);}
%{-moz-transform:translateX(-10px);}
%{-moz-transform:translateX(0);}
}
@-ms-keyframes bounceinL{
%{opacity:0;-ms-transform:translateX(-100px);}
%{opacity:1;-ms-transform:translateX(30px);}
%{-ms-transform:translateX(-10px);}
%{-ms-transform:translateX(0);}
}
@keyframes bounceinL{
%{opacity:0;transform:translateX(-100px);}
%{opacity:1;transform:translateX(30px);}
%{transform:translateX(-10px);}
%{transform:translateX(0);}
}
/* 弹出 */
@-webkit-keyframes bounceout{
%{-webkit-transform:scale(1);}
%{-webkit-transform:scale(0.95);}
%{opacity:1;-webkit-transform:scale(1.1);}
%{opacity:0;-webkit-transform:scale(0.3);}
}
@-moz-keyframes bounceout{
%{-moz-transform:scale(1);}
%{-moz-transform:scale(0.95);}
%{opacity:1;-moz-transform:scale(1.1);}
%{opacity:0;-moz-transform:scale(0.3);}
}
@-ms-keyframes bounceout{
%{-ms-transform:scale(1);}
%{-ms-transform:scale(0.95);}
%{opacity:1;-ms-transform:scale(1.1);}
%{opacity:0;-ms-transform:scale(0.3);}
}
@keyframes bounceout{
%{transform:scale(1);}
%{transform:scale(0.95);}
%{opacity:1;transform:scale(1.1);}
%{opacity:0;transform:scale(0.3);}
}
/* 弹出-向上*/
@-webkit-keyframes bounceoutT{
%{-webkit-transform:translateY(0);}
%{opacity:1;-webkit-transform:translateY(20px);}
%{opacity:0;-webkit-transform:translateY(-100px);}
}
@-moz-keyframes bounceoutT{
%{-moz-transform:translateY(0);}
%{opacity:1;-moz-transform:translateY(20px);}
%{opacity:0;-moz-transform:translateY(-100px);}
}
@-ms-keyframes bounceoutT{
%{-ms-transform:translateY(0);}
%{opacity:1;-ms-transform:translateY(20px);}
%{opacity:0;-ms-transform:translateY(-100px);}
}
@keyframes bounceoutT{
%{transform:translateY(0);}
%{opacity:1;transform:translateY(20px);}
%{opacity:0;transform:translateY(-100px);}
}
/* 弹出-向右*/
@-webkit-keyframes bounceoutR{
%{-webkit-transform:translateX(0);}
%{opacity:1;-webkit-transform:translateX(-20px);}
%{opacity:0;-webkit-transform:translateX(100px);}
}
@-moz-keyframes bounceoutR{
%{-moz-transform:translateX(0);}
%{opacity:1;-moz-transform:translateX(-20px);}
%{opacity:0;-moz-transform:translateX(100px);}
}
@-ms-keyframes bounceoutR{
%{-ms-transform:translateX(0);}
%{opacity:1;-ms-transform:translateX(-20px);}
%{opacity:0;-ms-transform:translateX(100px);}
}
@keyframes bounceoutR{
%{transform:translateX(0);}
%{opacity:1;transform:translateX(-20px);}
%{opacity:0;transform:translateX(100px);}
}
/* 弹出-向下 */
@-webkit-keyframes bounceoutB{
%{-webkit-transform:translateY(0);}
%{opacity:1;-webkit-transform:translateY(-20px);}
%{opacity:0;-webkit-transform:translateY(100px);}
}
@-moz-keyframes bounceoutB{
%{-moz-transform:translateY(0);}
%{opacity:1;-moz-transform:translateY(-20px);}
%{opacity:0;-moz-transform:translateY(100px);}
}
@-ms-keyframes bounceoutB{
%{-ms-transform:translateY(0);}
%{opacity:1;-ms-transform:translateY(-20px);}
%{opacity:0;-ms-transform:translateY(100px);}
}
@keyframes bounceoutB{
%{transform:translateY(0);}
%{opacity:1;transform:translateY(-20px);}
%{opacity:0;transform:translateY(100px);}
}
/* 弹出-向左 */
@-webkit-keyframes bounceoutL{
%{-webkit-transform:translateX(0);}
%{opacity:1;-webkit-transform:translateX(20px);}
%{opacity:0;-webkit-transform:translateX(-100px);}
}
@-moz-keyframes bounceoutL{
%{-moz-transform:translateX(0);}
%{opacity:1;-moz-transform:translateX(20px);}
%{opacity:0;-moz-transform:translateX(-100px);}
}
@-ms-keyframes bounceoutL{
%{-ms-transform:translateX(0);}
%{opacity:1;-ms-transform:translateX(20px);}
%{opacity:0;-ms-transform:translateX(-100px);}
}
@keyframes bounceoutL{
%{transform:translateX(0);}
%{opacity:1;transform:translateX(20px);}
%{opacity:0;transform:translateX(-200px);}
}
/* 转入 */
@-webkit-keyframes rotatein{
%{opacity:0;-webkit-transform:rotate(-200deg);}
%{opacity:1;-webkit-transform:rotate(0);}
}
@-moz-keyframes rotatein{
%{opacity:0;-moz-transform:rotate(-200deg);}
%{opacity:1;-moz-transform:rotate(0);}
}
@-ms-keyframes rotatein{
%{opacity:0;-ms-transform:rotate(-200deg);}
%{opacity:1;-ms-transform:rotate(0);}
}
@keyframes rotatein{
%{opacity:0;transform:rotate(-200deg);}
%{opacity:1;transform:rotate(0);}
}
/* 转入-从左上 */
@-webkit-keyframes rotateinLT{
%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}
%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateinLT{
%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}
%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
}
@-ms-keyframes rotateinLT{
%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;}
%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
}
@keyframes rotateinLT{
%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
/* 转入-从左下 */
@-webkit-keyframes rotateineftB{
%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}
%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateineftB{
%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}
%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
}
@-ms-keyframes rotateineftB{
%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;}
%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
}
@keyframes rotateineftB{
%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
/* 转入-从右上 */
@-webkit-keyframes rotateinRT{
%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}
%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateinRT{
%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}
%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
}
@-ms-keyframes rotateinRT{
%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;}
%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
}
@keyframes rotateinRT{
%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
/* 转入-从右下*/
@-webkit-keyframes rotateinRB{
%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}
%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
}
@-moz-keyframes rotateinRB{
%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}
%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
}
@-ms-keyframes rotateinRB{
%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;}
%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
}
@keyframes rotateinRB{
%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
/* 转出 */
@-webkit-keyframes rotateout{
%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;}
%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0;}
}
@-moz-keyframes rotateout{
%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1;}
%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0;}
}
@-ms-keyframes rotateout{
%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:1;}
%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:0;}
}
@keyframes rotateout{
%{transform-origin:center center;transform:rotate(0);opacity:1;}
%{transform-origin:center center;transform:rotate(200deg);opacity:0;}
}
/* 转出-向左上 */
@-webkit-keyframes rotateoutLT{
%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}
}
@-moz-keyframes rotateoutLT{
%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}
}
@-ms-keyframes rotateoutLT{
%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;}
}
@keyframes rotateoutLT{
%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
}
/* 转出-向左下 */
@-webkit-keyframes rotateoutLB{
%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}
}
@-moz-keyframes rotateoutLB{
%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}
}
@-ms-keyframes rotateoutLB{
%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;}
}
@keyframes rotateoutLB{
%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
}
/* 转出-向右上 */
@-webkit-keyframes rotateoutRT{
%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}
}
@-moz-keyframes rotateoutRT{
%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}
}
@-ms-keyframes rotateoutRT{
%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;}
}
@keyframes rotateoutRT{
%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
}
/* 转出-向右下 */
@-webkit-keyframes rotateoutBR{
%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}
}
@-moz-keyframes rotateoutBR{
%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}
}
@-ms-keyframes rotateoutBR{
%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;}
}
@keyframes rotateoutBR{
%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
}
/* 翻转 */
@-webkit-keyframes flip{
%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out;}
%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out;}
%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;}
%{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in;}
%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;}
}
@-moz-keyframes flip{
%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out;}
%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out;}
%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in;}
%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in;}
%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in;}
}
@-ms-keyframes flip{
%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out;}
%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out;}
%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in;}
%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in;}
%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in;}
}
@keyframes flip{
%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out;}
%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out;}
%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;}
%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in;}
%{transform:perspective(400px) scale(1);animation-timing-function:ease-in;}
}
/* 翻入-X轴 */
@-webkit-keyframes flipinX{
%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
%{-webkit-transform:perspective(400px) rotateX(-10deg);}
%{-webkit-transform:perspective(400px) rotateX(10deg);}
%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;}
}
@-moz-keyframes flipinX{
%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
%{-moz-transform:perspective(400px) rotateX(-10deg);}
%{-moz-transform:perspective(400px) rotateX(10deg);}
%{-moz-transform:perspective(400px) rotateX(0);opacity:1;}
}
@-ms-keyframes flipinX{
%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}
%{-ms-transform:perspective(400px) rotateX(-10deg);}
%{-ms-transform:perspective(400px) rotateX(10deg);}
%{-ms-transform:perspective(400px) rotateX(0);opacity:1;}
}
@keyframes flipinX{
%{transform:perspective(400px) rotateX(90deg);opacity:0;}
%{transform:perspective(400px) rotateX(-10deg);}
%{transform:perspective(400px) rotateX(10deg);}
%{transform:perspective(400px) rotateX(0);opacity:1;}
}
/* 翻入-Y轴 */
@-webkit-keyframes flipinY{
%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
%{-webkit-transform:perspective(400px) rotateY(-10deg);}
%{-webkit-transform:perspective(400px) rotateY(10deg);}
%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}
}
@-moz-keyframes flipinY{
%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
%{-moz-transform:perspective(400px) rotateY(-10deg);}
%{-moz-transform:perspective(400px) rotateY(10deg);}
%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}
}
@-ms-keyframes flipinY{
%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
%{-ms-transform:perspective(400px) rotateY(-10deg);}
%{-ms-transform:perspective(400px) rotateY(10deg);}
%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}
}
@keyframes flipinY{
%{transform:perspective(400px) rotateY(90deg);opacity:0;}
%{transform:perspective(400px) rotateY(-10deg);}
%{transform:perspective(400px) rotateY(10deg);}
%{transform:perspective(400px) rotateY(0);opacity:1;}
}
/* 翻出-X轴 */
@-webkit-keyframes flipoutX{
%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;}
%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@-moz-keyframes flipoutX{
%{-moz-transform:perspective(400px) rotateX(0);opacity:1;}
%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@-ms-keyframes flipoutX{
%{-ms-transform:perspective(400px) rotateX(0);opacity:1;}
%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@keyframes flipoutX{
%{transform:perspective(400px) rotateX(0);opacity:1;}
%{transform:perspective(400px) rotateX(90deg);opacity:0;}
}
/* 翻出-Y轴 */
@-webkit-keyframes flipoutY{
%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}
%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
}
@-moz-keyframes flipoutY{
%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}
%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
}
@-ms-keyframes flipoutY{
%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}
%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
}
@keyframes flipoutY{
%{transform:perspective(400px) rotateY(0);opacity:1;}
%{transform:perspective(400px) rotateY(90deg);opacity:0;}
}
/* 闪烁 */
@-webkit-keyframes flash{
%,50%,100%{opacity:1;}
%,75%{opacity:0;}
}
@-moz-keyframes flash{
%,50%,100%{opacity:1;}
%,75%{opacity:0;}
}
@-ms-keyframes flash{
%,50%,100%{opacity:1;}
%,75%{opacity:0;}
}
@keyframes flash{
%,50%,100%{opacity:1;}
%,75%{opacity:0;}
}
/* 震颤 */
@-webkit-keyframes shake{
%,100%{-webkit-transform:translateX(0);}
%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);}
%,40%,60%,80%{-webkit-transform:translateX(10px);}
}
@-moz-keyframes shake{
%,100%{-moz-transform:translateX(0);}
%,30%,50%,70%,90%{-moz-transform:translateX(-10px);}
%,40%,60%,80%{-moz-transform:translateX(10px);}
}
@-ms-keyframes shake{
%,100%{-ms-transform:translateX(0);}
%,30%,50%,70%,90%{-ms-transform:translateX(-10px);}
%,40%,60%,80%{-ms-transform:translateX(10px);}
}
@keyframes shake{
%,100%{transform:translateX(0);}
%,30%,50%,70%,90%{transform:translateX(-10px);}
%,40%,60%,80%{transform:translateX(10px);}
}
/* 摇摆 */
@-webkit-keyframes swing{
%{-webkit-transform:rotate(15deg);}
%{-webkit-transform:rotate(-10deg);}
%{-webkit-transform:rotate(5deg);}
%{-webkit-transform:rotate(-5deg);}
%{-webkit-transform:rotate(0);}
}
@-moz-keyframes swing{
%{-moz-transform:rotate(15deg);}
%{-moz-transform:rotate(-10deg);}
%{-moz-transform:rotate(5deg);}
%{-moz-transform:rotate(-5deg);}
%{-moz-transform:rotate(0);}
}
@-ms-keyframes swing{
%{-ms-transform:rotate(15deg);}
%{-ms-transform:rotate(-10deg);}
%{-ms-transform:rotate(5deg);}
%{-ms-transform:rotate(-5deg);}
%{-ms-transform:rotate(0);}
}
@keyframes swing{
%{transform:rotate(15deg);}
%{transform:rotate(-10deg);}
%{transform:rotate(5deg);}
%{transform:rotate(-5deg);}
%{transform:rotate(0);}
}
/* 摇晃 */
@-webkit-keyframes wobble{
%{-webkit-transform:translateX(0);}
%{-webkit-transform:translateX(-100px) rotate(-5deg);}
%{-webkit-transform:translateX(80px) rotate(3deg);}
%{-webkit-transform:translateX(-65px) rotate(-3deg);}
%{-webkit-transform:translateX(40px) rotate(2deg);}
%{-webkit-transform:translateX(-20px) rotate(-1deg);}
%{-webkit-transform:translateX(0);}
}
@-moz-keyframes wobble{
%{-moz-transform:translateX(0);}
%{-moz-transform:translateX(-100px) rotate(-5deg);}
%{-moz-transform:translateX(80px) rotate(3deg);}
%{-moz-transform:translateX(-65px) rotate(-3deg);}
%{-moz-transform:translateX(40px) rotate(2deg);}
%{-moz-transform:translateX(-20px) rotate(-1deg);}
%{-moz-transform:translateX(0);}
}
@-ms-keyframes wobble{
%{-ms-transform:translateX(0);}
%{-ms-transform:translateX(-100px) rotate(-5deg);}
%{-ms-transform:translateX(80px) rotate(3deg);}
%{-ms-transform:translateX(-65px) rotate(-3deg);}
%{-ms-transform:translateX(40px) rotate(2deg);}
%{-ms-transform:translateX(-20px) rotate(-1deg);}
%{-ms-transform:translateX(0);}
}
@keyframes wobble{
%{transform:translateX(0);}
%{transform:translateX(-100px) rotate(-5deg);}
%{transform:translateX(80px) rotate(3deg);}
%{transform:translateX(-65px) rotate(-3deg);}
%{transform:translateX(40px) rotate(2deg);}
%{transform:translateX(-20px) rotate(-1deg);}
%{transform:translateX(0);}
}
/* 震铃 */
@-webkit-keyframes ring{
%{-webkit-transform:scale(1);}
%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);}
%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);}
%{-webkit-transform:scale(1) rotate(0);}
}
@-moz-keyframes ring{
%{-moz-transform:scale(1);}
%,20%{-moz-transform:scale(0.9) rotate(-3deg);}
%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);}
%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}
%{-moz-transform:scale(1) rotate(0);}
}
@-ms-keyframes ring{
%{-ms-transform:scale(1);}
%,20%{-ms-transform:scale(0.9) rotate(-3deg);}
%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);}
%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);}
%{-ms-transform:scale(1) rotate(0);}
}
@keyframes ring{
%{transform:scale(1);}
%,20%{transform:scale(0.9) rotate(-3deg);}
%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}
%,60%,80%{transform:scale(1.1) rotate(-3deg);}
%{transform:scale(1) rotate(0);}
}

　　

网站地址 http://nec.netease.com/library/category/#animation

 

/* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;} .a-fadein,.a-fadeinT,.a-fadeinR,.a-fadeinB,.a-fadeinL,.a-bouncein,.a-bounceinT,.a-bounceinR,.a-bounceinB,.a-bounceinL,.a-rotatein,.a-rotateinLT,.a-rotateinLB,.a-rotateinRT,.a-rotateinRB,.a-flipin,.a-flipinX,.a-flipinY{-webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards;} .a-fadeout,.a-fadeoutT,.a-fadeoutR,.a-fadeoutB,.a-fadeoutL,.a-bounceout,.a-bounceoutT,.a-bounceoutR,.a-bounceoutB,.a-bounceoutL,.a-rotateout,.a-rotateoutLT,.a-rotateoutLB,.a-rotateoutRT,.a-rotateoutRB,.a-flipout,.a-flipoutX,.a-flipoutY{-webkit-animation:1s ease-in forwards;-moz-animation:1s ease-in forwards;-ms-animation:1s ease-in forwards;animation:1s ease-in forwards;} /* 淡入 */ .a-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein;} /* 淡入-从上 */ .a-fadeinT{-webkit-animation-name:fadeinT;-moz-animation-name:fadeinT;-ms-animation-name:fadeinT;animation-name:fadeinT;} /* 淡入-从右 */ .a-fadeinR{-webkit-animation-name:fadeinR;-moz-animation-name:fadeinR;-ms-animation-name:fadeinR;animation-name:fadeinR;} /* 淡入-从下 */ .a-fadeinB{-webkit-animation-name:fadeinB;-moz-animation-name:fadeinB;-ms-animation-name:fadeinB;animation-name:fadeinB;} /* 淡入-从左 */ .a-fadeinL{-webkit-animation-name:fadeinL;-moz-animation-name:fadeinL;-ms-animation-name:fadeinL;animation-name:fadeinL;} /* 淡出 */ .a-fadeout{-webkit-animation-name:fadeout;-moz-animation-name:fadeout;-ms-animation-name:fadeout;animation-name:fadeout;} /* 淡出-向上 */ .a-fadeoutT{-webkit-animation-name:fadeoutT;-moz-animation-name:fadeoutT;-ms-animation-name:fadeoutT;animation-name:fadeoutT;} /* 淡出-向右 */ .a-fadeoutR{-webkit-animation-name:fadeoutR;-moz-animation-name:fadeoutR;-ms-animation-name:fadeoutR;animation-name:fadeoutR;} /* 淡出-向下 */ .a-fadeoutB{-webkit-animation-name:fadeoutB;-moz-animation-name:fadeoutB;-ms-animation-name:fadeoutB;animation-name:fadeoutB;} /* 淡出-向左 */ .a-fadeoutL{-webkit-animation-name:fadeoutL;-moz-animation-name:fadeoutL;-ms-animation-name:fadeoutL;animation-name:fadeoutL;} /* 弹跳 */ .a-bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-ms-animation-name:bounce;animation-name:bounce;} /* 弹入 */ .a-bouncein{-webkit-animation-name:bouncein;-moz-animation-name:bouncein;-ms-animation-name:bouncein;animation-name:bouncein;} /* 弹入-从上 */ .a-bounceinT{-webkit-animation-name:bounceinT;-moz-animation-name:bounceinT;-ms-animation-name:bounceinT;animation-name:bounceinT;} /* 弹入-从右 */ .a-bounceinR{-webkit-animation-name:bounceinR;-moz-animation-name:bounceinR;-ms-animation-name:bounceinR;animation-name:bounceinR;} /* 弹入-从下 */ .a-bounceinB{-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB;} /* 弹入-从左 */ .a-bounceinL{-webkit-animation-name:bounceinL;-moz-animation-name:bounceinL;-ms-animation-name:bounceinL;animation-name:bounceinL;} /* 弹出 */ .a-bounceout{-webkit-animation-name:bounceout;-moz-animation-name:bounceout;-ms-animation-name:bounceout;animation-name:bounceout;} /* 弹出-向上 */ .a-bounceoutT{-webkit-animation-name:bounceoutT;-moz-animation-name:bounceoutT;-ms-animation-name:bounceoutT;animation-name:bounceoutT;} /* 弹出-向右 */ .a-bounceoutR{-webkit-animation-name:bounceoutR;-moz-animation-name:bounceoutR;-ms-animation-name:bounceoutR;animation-name:bounceoutR;} /* 弹出-向下 */ .a-bounceoutB{-webkit-animation-name:bounceoutB;-moz-animation-name:bounceoutB;-ms-animation-name:bounceoutB;animation-name:bounceoutB;} /* 弹出-向左 */ .a-bounceoutL{-webkit-animation-name:bounceoutL;-moz-animation-name:bounceoutL;-ms-animation-name:bounceoutL;animation-name:bounceoutL;} /* 转入 */ .a-rotatein{-webkit-animation-name:rotatein;-moz-animation-name:rotatein;-ms-animation-name:rotatein;animation-name:rotatein;} /* 转入-从左上 */ .a-rotateinLT{-webkit-animation-name:rotateinLT;-moz-animation-name:rotateinLT;-ms-animation-name:rotateinLT;animation-name:rotateinLT;} /* 转入-从左下 */ .a-rotateinLB{-webkit-animation-name:rotateinLB;-moz-animation-name:rotateinLB;-ms-animation-name:rotateinLB;animation-name:rotateinLB;} /* 转入-从右上 */ .a-rotateinRT{-webkit-animation-name:rotateinRT;-moz-animation-name:rotateinRT;-ms-animation-name:rotateinRT;animation-name:rotateinRT;} /* 转入-从右下*/ .a-rotateinRB{-webkit-animation-name:rotateinRB;-moz-animation-name:rotateinRB;-ms-animation-name:rotateinRB;animation-name:rotateinRB;} /* 转出 */ .a-rotateout{-webkit-animation-name:rotateout;-moz-animation-name:rotateout;-ms-animation-name:rotateout;animation-name:rotateout;} /* 转出-向左上 */ .a-rotateoutLT{-webkit-animation-name:rotateoutLT;-moz-animation-name:rotateoutLT;-ms-animation-name:rotateoutLT;animation-name:rotateoutLT;} /* 转出-向左下 */ .a-rotateoutLB{-webkit-animation-name:rotateoutLB;-moz-animation-name:rotateoutLB;-ms-animation-name:rotateoutLB;animation-name:rotateoutLB;} /* 转出-向右上 */ .a-rotateoutRT{-webkit-animation-name:rotateoutRT;-moz-animation-name:rotateoutRT;-ms-animation-name:rotateoutRT;animation-name:rotateoutRT;} /* 转出-向右下 */ .a-rotateoutRB{-webkit-animation-name:rotateoutRB;-moz-animation-name:rotateoutRB;-ms-animation-name:rotateoutRB;animation-name:rotateoutRB;} /* 翻转 */ .a-flip{-webkit-animation-name:flip;-moz-animation-name:flip;-ms-animation-name:flip;animation-name:flip;} /* 翻入-X轴 */ .a-flipinX{-webkit-animation-name:flipinX;-moz-animation-name:flipinX;-ms-animation-name:flipinX;animation-name:flipinX;} /* 翻入-Y轴 */ .a-flipin,.a-flipinY{-webkit-animation-name:flipinY;-moz-animation-name:flipinY;-ms-animation-name:flipinY;animation-name:flipinY;} /* 翻出-X轴 */ .a-flipoutX{-webkit-animation-name:flipoutX;-moz-animation-name:flipoutX;-ms-animation-name:flipoutX;animation-name:flipoutX;} /* 翻出-Y轴 */ .a-flipout,.a-flipoutY{-webkit-animation-name:flipoutY;-moz-animation-name:flipoutY;-ms-animation-name:flipoutY;animation-name:flipoutY;} /* 闪烁 */ .a-flash{-webkit-animation-name:flash;-moz-animation-name:flash;-ms-animation-name:flash;animation-name:flash;} /* 震颤 */ .a-shake{-webkit-animation-name:shake;-moz-animation-name:shake;-ms-animation-name:shake;animation-name:shake;} /* 摇摆 */ .a-swing{-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;animation-name:swing;} /* 摇晃 */ .a-wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-ms-animation-name:wobble;animation-name:wobble;} /* 震铃 */ .a-ring{-webkit-animation-name:ring;-moz-animation-name:ring;-ms-animation-name:ring;animation-name:ring;} /* define */ /* 淡入 */ @-webkit-keyframes fadein{ %{opacity:0;} %{opacity:1;} } @-moz-keyframes fadein{ %{opacity:0;} %{opacity:1;} } @-ms-keyframes fadein{ %{opacity:0;} %{opacity:1;} } @keyframes fadein{ %{opacity:0;} %{opacity:1;} } /* 淡入-从上 */ @-webkit-keyframes fadeinT{ %{opacity:0;-webkit-transform:translateY(-100px);} %{opacity:1;-webkit-transform:translateY(0);} } @-moz-keyframes fadeinT{ %{opacity:0;-moz-transform:translateY(-100px);} %{opacity:1;-moz-transform:translateY(0);} } @-ms-keyframes fadeinT{ %{opacity:0;-ms-transform:translateY(-100px);} %{opacity:1;-ms-transform:translateY(0);} } @keyframes fadeinT{ %{opacity:0;transform:translateY(-100px);} %{opacity:1;transform:translateY(0);} } /* 淡入-从右 */ @-webkit-keyframes fadeinR{ %{opacity:0;-webkit-transform:translateX(100px);} %{opacity:1;-webkit-transform:translateX(0);} } @-moz-keyframes fadeinR{ %{opacity:0;-moz-transform:translateX(100px);} %{opacity:1;-moz-transform:translateX(0);} } @-ms-keyframes fadeinR{ %{opacity:0;-ms-transform:translateX(100px);} %{opacity:1;-ms-transform:translateX(0);} } @keyframes fadeinR{ %{opacity:0;transform:translateX(100px);} %{opacity:1;transform:translateX(0);} } /* 淡入-从下 */ @-webkit-keyframes fadeinB{ %{opacity:0;-webkit-transform:translateY(100px);} %{opacity:1;-webkit-transform:translateY(0);} } @-moz-keyframes fadeinB{ %{opacity:0;-moz-transform:translateY(100px);} %{opacity:1;-moz-transform:translateY(0);} } @-ms-keyframes fadeinB{ %{opacity:0;-ms-transform:translateY(100px);} %{opacity:1;-ms-transform:translateY(0);} } @keyframes fadeinB{ %{opacity:0;transform:translateY(100px);} %{opacity:1;transform:translateY(0);} } /* 淡入-从左 */ @-webkit-keyframes fadeinL{ %{opacity:0;-webkit-transform:translateX(-100px);} %{opacity:1;-webkit-transform:translateX(0);} } @-moz-keyframes fadeinL{ %{opacity:0;-moz-transform:translateX(-100px);} %{opacity:1;-moz-transform:translateX(0);} } @-ms-keyframes fadeinL{ %{opacity:0;-ms-transform:translateX(-100px);} %{opacity:1;-ms-transform:translateX(0);} } @keyframes fadeinL{ %{opacity:0;transform:translateX(-100px);} %{opacity:1;transform:translateX(0);} } /* 淡出 */ @-webkit-keyframes fadeout{ %{opacity:1;} %{opacity:0;} } @-moz-keyframes fadeout{ %{opacity:1;} %{opacity:0;} } @-ms-keyframes fadeout{ %{opacity:1;} %{opacity:0;} } @keyframes fadeout{ %{opacity:1;} %{opacity:0;} } /* 淡出-向上 */ @-webkit-keyframes fadeoutT{ %{opacity:1;-webkit-transform:translateY(0);} %{opacity:0;-webkit-transform:translateY(-100px);} } @-moz-keyframes fadeoutT{ %{opacity:1;-moz-transform:translateY(0);} %{opacity:0;-moz-transform:translateY(-100px);} } @-ms-keyframes fadeoutT{ %{opacity:1;-ms-transform:translateY(0);} %{opacity:0;-ms-transform:translateY(-100px);} } @keyframes fadeoutT{ %{opacity:1;transform:translateY(0);} %{opacity:0;transform:translateY(-100px);} } /* 淡出-向右 */ @-webkit-keyframes fadeoutR{ %{opacity:1;-webkit-transform:translateX(0);} %{opacity:0;-webkit-transform:translateX(100px);} } @-moz-keyframes fadeoutR{ %{opacity:1;-moz-transform:translateX(0);} %{opacity:0;-moz-transform:translateX(100px);} } @-ms-keyframes fadeoutR{ %{opacity:1;-ms-transform:translateX(0);} %{opacity:0;-ms-transform:translateX(100px);} } @keyframes fadeoutR{ %{opacity:1;transform:translateX(0);} %{opacity:0;transform:translateX(100px);} } /* 淡出-向下 */ @-webkit-keyframes fadeoutB{ %{opacity:1;-webkit-transform:translateY(0);} %{opacity:0;-webkit-transform:translateY(100px);} } @-moz-keyframes fadeoutB{ %{opacity:1;-moz-transform:translateY(0);} %{opacity:0;-moz-transform:translateY(100px);} } @-ms-keyframes fadeoutB{ %{opacity:1;-ms-transform:translateY(0);} %{opacity:0;-ms-transform:translateY(100px);} } @keyframes fadeoutB{ %{opacity:1;transform:translateY(0);} %{opacity:0;transform:translateY(100px);} } /* 淡出-向左 */ @-webkit-keyframes fadeoutL{ %{opacity:1;-webkit-transform:translateX(0);} %{opacity:0;-webkit-transform:translateX(-100px);} } @-moz-keyframes fadeoutL{ %{opacity:1;-moz-transform:translateX(0);} %{opacity:0;-moz-transform:translateX(-100px);} } @-ms-keyframes fadeoutL{ %{opacity:1;-ms-transform:translateX(0);} %{opacity:0;-ms-transform:translateX(-100px);} } @keyframes fadeoutL{ %{opacity:1;transform:translateX(0);} %{opacity:0;transform:translateX(-100px);} } /* 弹跳 */ @-webkit-keyframes bounce{ %,20%,50%,80%,100%{-webkit-transform:translateY(0);} %{-webkit-transform:translateY(-30px);} %{-webkit-transform:translateY(-15px);} } @-moz-keyframes bounce{ %,20%,50%,80%,100%{-moz-transform:translateY(0);} %{-moz-transform:translateY(-30px);} %{-moz-transform:translateY(-15px);} } @-ms-keyframes bounce{ %,20%,50%,80%,100%{-ms-transform:translateY(0);} %{-ms-transform:translateY(-30px);} %{-ms-transform:translateY(-15px);} } @keyframes bounce{ %,20%,50%,80%,100%{transform:translateY(0);} %{transform:translateY(-30px);} %{transform:translateY(-15px);} } /* 弹入 */ @-webkit-keyframes bouncein{ %{opacity:0;-webkit-transform:scale(0.3);} %{opacity:1;-webkit-transform:scale(1.05);} %{-webkit-transform:scale(0.9);} %{-webkit-transform:scale(1);} } @-moz-keyframes bouncein{ %{opacity:0;-moz-transform:scale(0.3);} %{opacity:1;-moz-transform:scale(1.05);} %{-moz-transform:scale(0.9);} %{-moz-transform:scale(1);} } @-ms-keyframes bouncein{ %{opacity:0;-ms-transform:scale(0.3);} %{opacity:1;-ms-transform:scale(1.05);} %{-ms-transform:scale(0.9);} %{-ms-transform:scale(1);} } @keyframes bouncein{ %{opacity:0;transform:scale(0.3);} %{opacity:1;transform:scale(1.05);} %{transform:scale(0.9);} %{transform:scale(1);} } /* 弹入-从上 */ @-webkit-keyframes bounceinT{ %{opacity:0;-webkit-transform:translateY(-100px);} %{opacity:1;-webkit-transform:translateY(30px);} %{-webkit-transform:translateY(-10px);} %{-webkit-transform:translateY(0);} } @-moz-keyframes bounceinT{ %{opacity:0;-moz-transform:translateY(-100px);} %{opacity:1;-moz-transform:translateY(30px);} %{-moz-transform:translateY(-10px);} %{-moz-transform:translateY(0);} } @-ms-keyframes bounceinT{ %{opacity:0;-ms-transform:translateY(-100px);} %{opacity:1;-ms-transform:translateY(30px);} %{-ms-transform:translateY(-10px);} %{-ms-transform:translateY(0);} } @keyframes bounceinT{ %{opacity:0;transform:translateY(-100px);} %{opacity:1;transform:translateY(30px);} %{transform:translateY(-10px);} %{transform:translateY(0);} } /* 弹入-从右 */ @-webkit-keyframes bounceinR{ %{opacity:0;-webkit-transform:translateX(100px);} %{opacity:1;-webkit-transform:translateX(-30px);} %{-webkit-transform:translateX(10px);} %{-webkit-transform:translateX(0);} } @-moz-keyframes bounceinR{ %{opacity:0;-moz-transform:translateX(100px);} %{opacity:1;-moz-transform:translateX(-30px);} %{-moz-transform:translateX(10px);} %{-moz-transform:translateX(0);} } @-ms-keyframes bounceinR{ %{opacity:0;-ms-transform:translateX(100px);} %{opacity:1;-ms-transform:translateX(-30px);} %{-ms-transform:translateX(10px);} %{-ms-transform:translateX(0);} } @keyframes bounceinR{ %{opacity:0;transform:translateX(100px);} %{opacity:1;transform:translateX(-30px);} %{transform:translateX(10px);} %{transform:translateX(0);} } /* 弹入-从下 */ @-webkit-keyframes bounceinB{ %{opacity:0;-webkit-transform:translateY(100px);} %{opacity:1;-webkit-transform:translateY(-30px);} %{-webkit-transform:translateY(10px);} %{-webkit-transform:translateY(0);} } @-moz-keyframes bounceinB{ %{opacity:0;-moz-transform:translateY(100px);} %{opacity:1;-moz-transform:translateY(-30px);} %{-moz-transform:translateY(10px);} %{-moz-transform:translateY(0);} } @-ms-keyframes bounceinB{ %{opacity:0;-ms-transform:translateY(100px);} %{opacity:1;-ms-transform:translateY(-30px);} %{-ms-transform:translateY(10px);} %{-ms-transform:translateY(0);} } @keyframes bounceinB{ %{opacity:0;transform:translateY(100px);} %{opacity:1;transform:translateY(-30px);} %{transform:translateY(10px);} %{transform:translateY(0);} } /* 弹入-从左 */ @-webkit-keyframes bounceinL{ %{opacity:0;-webkit-transform:translateX(-100px);} %{opacity:1;-webkit-transform:translateX(30px);} %{-webkit-transform:translateX(-10px);} %{-webkit-transform:translateX(0);} } @-moz-keyframes bounceinL{ %{opacity:0;-moz-transform:translateX(-100px);} %{opacity:1;-moz-transform:translateX(30px);} %{-moz-transform:translateX(-10px);} %{-moz-transform:translateX(0);} } @-ms-keyframes bounceinL{ %{opacity:0;-ms-transform:translateX(-100px);} %{opacity:1;-ms-transform:translateX(30px);} %{-ms-transform:translateX(-10px);} %{-ms-transform:translateX(0);} } @keyframes bounceinL{ %{opacity:0;transform:translateX(-100px);} %{opacity:1;transform:translateX(30px);} %{transform:translateX(-10px);} %{transform:translateX(0);} } /* 弹出 */ @-webkit-keyframes bounceout{ %{-webkit-transform:scale(1);} %{-webkit-transform:scale(0.95);} %{opacity:1;-webkit-transform:scale(1.1);} %{opacity:0;-webkit-transform:scale(0.3);} } @-moz-keyframes bounceout{ %{-moz-transform:scale(1);} %{-moz-transform:scale(0.95);} %{opacity:1;-moz-transform:scale(1.1);} %{opacity:0;-moz-transform:scale(0.3);} } @-ms-keyframes bounceout{ %{-ms-transform:scale(1);} %{-ms-transform:scale(0.95);} %{opacity:1;-ms-transform:scale(1.1);} %{opacity:0;-ms-transform:scale(0.3);} } @keyframes bounceout{ %{transform:scale(1);} %{transform:scale(0.95);} %{opacity:1;transform:scale(1.1);} %{opacity:0;transform:scale(0.3);} } /* 弹出-向上*/ @-webkit-keyframes bounceoutT{ %{-webkit-transform:translateY(0);} %{opacity:1;-webkit-transform:translateY(20px);} %{opacity:0;-webkit-transform:translateY(-100px);} } @-moz-keyframes bounceoutT{ %{-moz-transform:translateY(0);} %{opacity:1;-moz-transform:translateY(20px);} %{opacity:0;-moz-transform:translateY(-100px);} } @-ms-keyframes bounceoutT{ %{-ms-transform:translateY(0);} %{opacity:1;-ms-transform:translateY(20px);} %{opacity:0;-ms-transform:translateY(-100px);} } @keyframes bounceoutT{ %{transform:translateY(0);} %{opacity:1;transform:translateY(20px);} %{opacity:0;transform:translateY(-100px);} } /* 弹出-向右*/ @-webkit-keyframes bounceoutR{ %{-webkit-transform:translateX(0);} %{opacity:1;-webkit-transform:translateX(-20px);} %{opacity:0;-webkit-transform:translateX(100px);} } @-moz-keyframes bounceoutR{ %{-moz-transform:translateX(0);} %{opacity:1;-moz-transform:translateX(-20px);} %{opacity:0;-moz-transform:translateX(100px);} } @-ms-keyframes bounceoutR{ %{-ms-transform:translateX(0);} %{opacity:1;-ms-transform:translateX(-20px);} %{opacity:0;-ms-transform:translateX(100px);} } @keyframes bounceoutR{ %{transform:translateX(0);} %{opacity:1;transform:translateX(-20px);} %{opacity:0;transform:translateX(100px);} } /* 弹出-向下 */ @-webkit-keyframes bounceoutB{ %{-webkit-transform:translateY(0);} %{opacity:1;-webkit-transform:translateY(-20px);} %{opacity:0;-webkit-transform:translateY(100px);} } @-moz-keyframes bounceoutB{ %{-moz-transform:translateY(0);} %{opacity:1;-moz-transform:translateY(-20px);} %{opacity:0;-moz-transform:translateY(100px);} } @-ms-keyframes bounceoutB{ %{-ms-transform:translateY(0);} %{opacity:1;-ms-transform:translateY(-20px);} %{opacity:0;-ms-transform:translateY(100px);} } @keyframes bounceoutB{ %{transform:translateY(0);} %{opacity:1;transform:translateY(-20px);} %{opacity:0;transform:translateY(100px);} } /* 弹出-向左 */ @-webkit-keyframes bounceoutL{ %{-webkit-transform:translateX(0);} %{opacity:1;-webkit-transform:translateX(20px);} %{opacity:0;-webkit-transform:translateX(-100px);} } @-moz-keyframes bounceoutL{ %{-moz-transform:translateX(0);} %{opacity:1;-moz-transform:translateX(20px);} %{opacity:0;-moz-transform:translateX(-100px);} } @-ms-keyframes bounceoutL{ %{-ms-transform:translateX(0);} %{opacity:1;-ms-transform:translateX(20px);} %{opacity:0;-ms-transform:translateX(-100px);} } @keyframes bounceoutL{ %{transform:translateX(0);} %{opacity:1;transform:translateX(20px);} %{opacity:0;transform:translateX(-200px);} } /* 转入 */ @-webkit-keyframes rotatein{ %{opacity:0;-webkit-transform:rotate(-200deg);} %{opacity:1;-webkit-transform:rotate(0);} } @-moz-keyframes rotatein{ %{opacity:0;-moz-transform:rotate(-200deg);} %{opacity:1;-moz-transform:rotate(0);} } @-ms-keyframes rotatein{ %{opacity:0;-ms-transform:rotate(-200deg);} %{opacity:1;-ms-transform:rotate(0);} } @keyframes rotatein{ %{opacity:0;transform:rotate(-200deg);} %{opacity:1;transform:rotate(0);} } /* 转入-从左上 */ @-webkit-keyframes rotateinLT{ %{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;} %{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;} } @-moz-keyframes rotateinLT{ %{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;} %{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;} } @-ms-keyframes rotateinLT{ %{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;} %{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;} } @keyframes rotateinLT{ %{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;} %{transform-origin:left bottom;transform:rotate(0);opacity:1;} } /* 转入-从左下 */ @-webkit-keyframes rotateineftB{ %{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;} %{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;} } @-moz-keyframes rotateineftB{ %{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;} %{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;} } @-ms-keyframes rotateineftB{ %{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;} %{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;} } @keyframes rotateineftB{ %{transform-origin:left bottom;transform:rotate(90deg);opacity:0;} %{transform-origin:left bottom;transform:rotate(0);opacity:1;} } /* 转入-从右上 */ @-webkit-keyframes rotateinRT{ %{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;} %{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;} } @-moz-keyframes rotateinRT{ %{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;} %{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;} } @-ms-keyframes rotateinRT{ %{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;} %{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;} } @keyframes rotateinRT{ %{transform-origin:right bottom;transform:rotate(90deg);opacity:0;} %{transform-origin:right bottom;transform:rotate(0);opacity:1;} } /* 转入-从右下*/ @-webkit-keyframes rotateinRB{ %{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;} %{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;} } @-moz-keyframes rotateinRB{ %{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;} %{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;} } @-ms-keyframes rotateinRB{ %{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;} %{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;} } @keyframes rotateinRB{ %{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;} %{transform-origin:right bottom;transform:rotate(0);opacity:1;} } /* 转出 */ @-webkit-keyframes rotateout{ %{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;} %{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0;} } @-moz-keyframes rotateout{ %{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1;} %{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0;} } @-ms-keyframes rotateout{ %{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:1;} %{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:0;} } @keyframes rotateout{ %{transform-origin:center center;transform:rotate(0);opacity:1;} %{transform-origin:center center;transform:rotate(200deg);opacity:0;} } /* 转出-向左上 */ @-webkit-keyframes rotateoutLT{ %{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;} %{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;} } @-moz-keyframes rotateoutLT{ %{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;} %{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;} } @-ms-keyframes rotateoutLT{ %{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;} %{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;} } @keyframes rotateoutLT{ %{transform-origin:left bottom;transform:rotate(0);opacity:1;} %{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;} } /* 转出-向左下 */ @-webkit-keyframes rotateoutLB{ %{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;} %{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;} } @-moz-keyframes rotateoutLB{ %{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;} %{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;} } @-ms-keyframes rotateoutLB{ %{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;} %{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;} } @keyframes rotateoutLB{ %{transform-origin:left bottom;transform:rotate(0);opacity:1;} %{transform-origin:left bottom;transform:rotate(90deg);opacity:0;} } /* 转出-向右上 */ @-webkit-keyframes rotateoutRT{ %{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;} %{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;} } @-moz-keyframes rotateoutRT{ %{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;} %{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;} } @-ms-keyframes rotateoutRT{ %{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;} %{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;} } @keyframes rotateoutRT{ %{transform-origin:right bottom;transform:rotate(0);opacity:1;} %{transform-origin:right bottom;transform:rotate(90deg);opacity:0;} } /* 转出-向右下 */ @-webkit-keyframes rotateoutBR{ %{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;} %{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;} } @-moz-keyframes rotateoutBR{ %{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;} %{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;} } @-ms-keyframes rotateoutBR{ %{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;} %{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;} } @keyframes rotateoutBR{ %{transform-origin:right bottom;transform:rotate(0);opacity:1;} %{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;} } /* 翻转 */ @-webkit-keyframes flip{ %{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out;} %{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out;} %{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;} %{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in;} %{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;} } @-moz-keyframes flip{ %{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out;} %{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out;} %{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in;} %{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in;} %{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in;} } @-ms-keyframes flip{ %{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out;} %{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out;} %{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in;} %{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in;} %{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in;} } @keyframes flip{ %{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out;} %{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out;} %{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;} %{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in;} %{transform:perspective(400px) scale(1);animation-timing-function:ease-in;} } /* 翻入-X轴 */ @-webkit-keyframes flipinX{ %{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;} %{-webkit-transform:perspective(400px) rotateX(-10deg);} %{-webkit-transform:perspective(400px) rotateX(10deg);} %{-webkit-transform:perspective(400px) rotateX(0);opacity:1;} } @-moz-keyframes flipinX{ %{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;} %{-moz-transform:perspective(400px) rotateX(-10deg);} %{-moz-transform:perspective(400px) rotateX(10deg);} %{-moz-transform:perspective(400px) rotateX(0);opacity:1;} } @-ms-keyframes flipinX{ %{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;} %{-ms-transform:perspective(400px) rotateX(-10deg);} %{-ms-transform:perspective(400px) rotateX(10deg);} %{-ms-transform:perspective(400px) rotateX(0);opacity:1;} } @keyframes flipinX{ %{transform:perspective(400px) rotateX(90deg);opacity:0;} %{transform:perspective(400px) rotateX(-10deg);} %{transform:perspective(400px) rotateX(10deg);} %{transform:perspective(400px) rotateX(0);opacity:1;} } /* 翻入-Y轴 */ @-webkit-keyframes flipinY{ %{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;} %{-webkit-transform:perspective(400px) rotateY(-10deg);} %{-webkit-transform:perspective(400px) rotateY(10deg);} %{-webkit-transform:perspective(400px) rotateY(0);opacity:1;} } @-moz-keyframes flipinY{ %{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;} %{-moz-transform:perspective(400px) rotateY(-10deg);} %{-moz-transform:perspective(400px) rotateY(10deg);} %{-moz-transform:perspective(400px) rotateY(0);opacity:1;} } @-ms-keyframes flipinY{ %{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;} %{-ms-transform:perspective(400px) rotateY(-10deg);} %{-ms-transform:perspective(400px) rotateY(10deg);} %{-ms-transform:perspective(400px) rotateY(0);opacity:1;} } @keyframes flipinY{ %{transform:perspective(400px) rotateY(90deg);opacity:0;} %{transform:perspective(400px) rotateY(-10deg);} %{transform:perspective(400px) rotateY(10deg);} %{transform:perspective(400px) rotateY(0);opacity:1;} } /* 翻出-X轴 */ @-webkit-keyframes flipoutX{ %{-webkit-transform:perspective(400px) rotateX(0);opacity:1;} %{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;} } @-moz-keyframes flipoutX{ %{-moz-transform:perspective(400px) rotateX(0);opacity:1;} %{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;} } @-ms-keyframes flipoutX{ %{-ms-transform:perspective(400px) rotateX(0);opacity:1;} %{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;} } @keyframes flipoutX{ %{transform:perspective(400px) rotateX(0);opacity:1;} %{transform:perspective(400px) rotateX(90deg);opacity:0;} } /* 翻出-Y轴 */ @-webkit-keyframes flipoutY{ %{-webkit-transform:perspective(400px) rotateY(0);opacity:1;} %{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;} } @-moz-keyframes flipoutY{ %{-moz-transform:perspective(400px) rotateY(0);opacity:1;} %{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;} } @-ms-keyframes flipoutY{ %{-ms-transform:perspective(400px) rotateY(0);opacity:1;} %{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;} } @keyframes flipoutY{ %{transform:perspective(400px) rotateY(0);opacity:1;} %{transform:perspective(400px) rotateY(90deg);opacity:0;} } /* 闪烁 */ @-webkit-keyframes flash{ %,50%,100%{opacity:1;} %,75%{opacity:0;} } @-moz-keyframes flash{ %,50%,100%{opacity:1;} %,75%{opacity:0;} } @-ms-keyframes flash{ %,50%,100%{opacity:1;} %,75%{opacity:0;} } @keyframes flash{ %,50%,100%{opacity:1;} %,75%{opacity:0;} } /* 震颤 */ @-webkit-keyframes shake{ %,100%{-webkit-transform:translateX(0);} %,30%,50%,70%,90%{-webkit-transform:translateX(-10px);} %,40%,60%,80%{-webkit-transform:translateX(10px);} } @-moz-keyframes shake{ %,100%{-moz-transform:translateX(0);} %,30%,50%,70%,90%{-moz-transform:translateX(-10px);} %,40%,60%,80%{-moz-transform:translateX(10px);} } @-ms-keyframes shake{ %,100%{-ms-transform:translateX(0);} %,30%,50%,70%,90%{-ms-transform:translateX(-10px);} %,40%,60%,80%{-ms-transform:translateX(10px);} } @keyframes shake{ %,100%{transform:translateX(0);} %,30%,50%,70%,90%{transform:translateX(-10px);} %,40%,60%,80%{transform:translateX(10px);} } /* 摇摆 */ @-webkit-keyframes swing{ %{-webkit-transform:rotate(15deg);} %{-webkit-transform:rotate(-10deg);} %{-webkit-transform:rotate(5deg);} %{-webkit-transform:rotate(-5deg);} %{-webkit-transform:rotate(0);} } @-moz-keyframes swing{ %{-moz-transform:rotate(15deg);} %{-moz-transform:rotate(-10deg);} %{-moz-transform:rotate(5deg);} %{-moz-transform:rotate(-5deg);} %{-moz-transform:rotate(0);} } @-ms-keyframes swing{ %{-ms-transform:rotate(15deg);} %{-ms-transform:rotate(-10deg);} %{-ms-transform:rotate(5deg);} %{-ms-transform:rotate(-5deg);} %{-ms-transform:rotate(0);} } @keyframes swing{ %{transform:rotate(15deg);} %{transform:rotate(-10deg);} %{transform:rotate(5deg);} %{transform:rotate(-5deg);} %{transform:rotate(0);} } /* 摇晃 */ @-webkit-keyframes wobble{ %{-webkit-transform:translateX(0);} %{-webkit-transform:translateX(-100px) rotate(-5deg);} %{-webkit-transform:translateX(80px) rotate(3deg);} %{-webkit-transform:translateX(-65px) rotate(-3deg);} %{-webkit-transform:translateX(40px) rotate(2deg);} %{-webkit-transform:translateX(-20px) rotate(-1deg);} %{-webkit-transform:translateX(0);} } @-moz-keyframes wobble{ %{-moz-transform:translateX(0);} %{-moz-transform:translateX(-100px) rotate(-5deg);} %{-moz-transform:translateX(80px) rotate(3deg);} %{-moz-transform:translateX(-65px) rotate(-3deg);} %{-moz-transform:translateX(40px) rotate(2deg);} %{-moz-transform:translateX(-20px) rotate(-1deg);} %{-moz-transform:translateX(0);} } @-ms-keyframes wobble{ %{-ms-transform:translateX(0);} %{-ms-transform:translateX(-100px) rotate(-5deg);} %{-ms-transform:translateX(80px) rotate(3deg);} %{-ms-transform:translateX(-65px) rotate(-3deg);} %{-ms-transform:translateX(40px) rotate(2deg);} %{-ms-transform:translateX(-20px) rotate(-1deg);} %{-ms-transform:translateX(0);} } @keyframes wobble{ %{transform:translateX(0);} %{transform:translateX(-100px) rotate(-5deg);} %{transform:translateX(80px) rotate(3deg);} %{transform:translateX(-65px) rotate(-3deg);} %{transform:translateX(40px) rotate(2deg);} %{transform:translateX(-20px) rotate(-1deg);} %{transform:translateX(0);} } /* 震铃 */ @-webkit-keyframes ring{ %{-webkit-transform:scale(1);} %,20%{-webkit-transform:scale(0.9) rotate(-3deg);} %,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);} %,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);} %{-webkit-transform:scale(1) rotate(0);} } @-moz-keyframes ring{ %{-moz-transform:scale(1);} %,20%{-moz-transform:scale(0.9) rotate(-3deg);} %,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);} %,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);} %{-moz-transform:scale(1) rotate(0);} } @-ms-keyframes ring{ %{-ms-transform:scale(1);} %,20%{-ms-transform:scale(0.9) rotate(-3deg);} %,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);} %,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);} %{-ms-transform:scale(1) rotate(0);} } @keyframes ring{ %{transform:scale(1);} %,20%{transform:scale(0.9) rotate(-3deg);} %,50%,70%,90%{transform:scale(1.1) rotate(3deg);} %,60%,80%{transform:scale(1.1) rotate(-3deg);} %{transform:scale(1) rotate(0);} }