非常全的CSS效果大全呦

今天给大家说一下非常全的CSS效果大全呦！
仔细记好!并练习呦！
小常说一下：
对自己狠一点，逼自己努力，再过五年你将会感谢今天发狠的自己、恨透今天懒惰自卑的自己。我始终相信一句话：只有自己足够强大，才不会被别人践踏。

/* 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{
   
    0%{
   opacity:0;}
    100%{
   opacity:1;}
}
@-moz-keyframes fadein{
   
    0%{
   opacity:0;}
    100%{
   opacity:1;}
}
@-ms-keyframes fadein{
   
    0%{
   opacity:0;}
    100%{
   opacity:1;}
}
@keyframes fadein{
   
    0%{
   opacity:0;}
    100%{
   opacity:1;}
}
/* 淡入-从上 */
@-webkit-keyframes fadeinT{
   
    0%{
   opacity:0;-webkit-transform:translateY(-100px);}
    100%{
   opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes fadeinT{
   
    0%{
   opacity:0;-moz-transform:translateY(-100px);}
    100%{
   opacity:1;-moz-transform:translateY(0);}
}
@-ms-keyframes fadeinT{
   
    0%{
   opacity:0;-ms-transform:translateY(-100px);}
    100%{
   opacity:1;-ms-transform:translateY(0);}
}
@keyframes fadeinT{
   
    0%{
   opacity:0;transform:translateY(-100px);}
    100%{
   opacity:1;transform:translateY(0);}
}
/* 淡入-从右 */
@-webkit-keyframes fadeinR{
   
    0%{
   opacity:0;-webkit-transform:translateX(100px);}
    100%{
   opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeinR{
   
    0%{
   opacity:0;-moz-transform:translateX(100px);}
    100%{
   opacity:1;-moz-transform:translateX(0);}
}
@-ms-keyframes fadeinR{
   
    0%{
   opacity:0;-ms-transform:translateX(100px);}
    100%{
   opacity:1;-ms-transform:translateX(0);}
}
@keyframes fadeinR{
   
    0%{
   opacity:0;transform:translateX(100px);}
    100%{
   opacity:1;transform:translateX(0);}
}
/* 淡入-从下 */
@-webkit-keyframes fadeinB{
   
    0%{
   opacity:0;-webkit-transform:translateY(100px);}
    100%{
   opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes fadeinB{
   
    0%{
   opacity:0;-moz-transform:translateY(100px);}
    100%{
   opacity:1;-moz-transform:translateY(0);}
}
@-ms-keyframes fadeinB{
   
    0%{
   opacity:0;-ms-transform:translateY(100px);}
    100%{
   opacity:1;-ms-transform:translateY(0);}
}
@keyframes fadeinB{
   
    0%{
   opacity:0;transform:translateY(100px);}
    100%{
   opacity:1;transform:translateY(0);}
}
/* 淡入-从左 */
@-webkit-keyframes fadeinL{
   
    0%{
   opacity:0;-webkit-transform:translateX(-100px);}
    100%{
   opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeinL{
   
    0%{
   opacity:0;-moz-transform:translateX(-100px);}
    100%{
   opacity:1;-moz-transform:translateX(0);}
}
@-ms-keyframes fadeinL{
   
    0%{
   opacity:0;-ms-transform:translateX(-100px);}
    100%{
   opacity:1;-ms-transform:translateX(0);}
}
@keyframes fadeinL{
   
    0%{
   opacity:0;transform:translateX(-100px);}
    100%{
   opacity:1;transform:translateX(0);}
}
/* 淡出 */
@-webkit-keyframes fadeout{
   
    0%{
   opacity:1;}
    100%{
   opacity:0;}
}
@-moz-keyframes fadeout{
   
    0%{
   opacity:1;}
    100%{
   opacity:0;}
}
@