CSS3常用动画效果合集（最全）

}

@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;}

}

@-ms-keyframes fadeout{

0%{opacity:1;}

100%{opacity:0;}

}

@keyframes fadeout{

0%{opacity:1;}

100%{opacity:0;}

}

/* 淡出-向上 */

@-webkit-keyframes fadeoutT{

0%{opacity:1;-webkit-transform:translateY(0);}

100%{opacity:0;-webkit-transform:translateY(-100px);}

}

@-moz-keyframes fadeoutT{

0%{opacity:1;-moz-transform:translateY(0);}

100%{opacity:0;-moz-transform:translateY(-100px);}

}

@-ms-keyframes fadeoutT{

0%{opacity:1;-ms-transform:translateY(0);}

100%{opacity:0;-ms-transform:translateY(-100px);}

}

@keyframes fadeoutT{

0%{opacity:1;transform:translateY(0);}

100%{opacity:0;transform:translateY(-100px);}

}

/* 淡出-向右 */

@-webkit-keyframes fadeoutR{

0%{opacity:1;-webkit-transform:translateX(0);}

100%{opacity:0;-webkit-transform:translateX(100px);}

}

@-moz-keyframes fadeoutR{

0%{opacity:1;-moz-transform:translateX(0);}

100%{opacity:0;-moz-transform:translateX(100px);}

}

@-ms-keyframes fadeoutR{

0%{opacity:1;-ms-transform:translateX(0);}

100%{opacity:0;-ms-transform:translateX(100px);}

}

@keyframes fadeoutR{

0%{opacity:1;transform:translateX(0);}

100%{opacity:0;transform:translateX(100px);}

}

/* 淡出-向下 */

@-webkit-keyframes fadeoutB{

0%{opacity:1;-webkit-transform:translateY(0);}

100%{opacity:0;-webkit-transform:translateY(100px);}

}

@-moz-keyframes fadeoutB{

0%{opacity:1;-moz-transform:translateY(0);}

100%{opacity:0;-moz-transform:translateY(100px);}

}

@-ms-keyframes fadeoutB{

0%{opacity:1;-ms-transform:translateY(0);}

100%{opacity:0;-ms-transform:translateY(100px);}

}

@keyframes fadeoutB{

0%{opacity:1;transform:translateY(0);}

100%{opacity:0;transform:translateY(100px);}

}

/* 淡出-向左 */

@-webkit-keyframes fadeoutL{

0%{opacity:1;-webkit-transform:translateX(0);}

100%{opacity:0;-webkit-transform:translateX(-100px);}

}

@-moz-keyframes fadeoutL{

0%{opacity:1;-moz-transform:translateX(0);}

100%{opacity:0;-moz-transform:translateX(-100px);}

}

@-ms-keyframes fadeoutL{

0%{opacity:1;-ms-transform:translateX(0);}

100%{opacity:0;-ms-transform:translateX(-100px);}

}

@keyframes fadeoutL{

0%{opacity:1;transform:translateX(0);}

100%{opacity:0;transform:translateX(-100px);}

}

/* 弹跳 */

@-webkit-keyframes bounce{

0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}

40%{-webkit-transform:translateY(-30px);}

60%{-webkit-transform:translateY(-15px);}

}

@-moz-keyframes bounce{

0%,20%,50%,80%,100%{-moz-transform:translateY(0);}

40%{-moz-transform:translateY(-30px);}

60%{-moz-transform:translateY(-15px);}

}

@-ms-keyframes bounce{

0%,20%,50%,80%,100%{-ms-transform:translateY(0);}

40%{-ms-transform:translateY(-30px);}

60%{-ms-transform:translateY(-15px);}

}

@keyframes bounce{

0%,20%,50%,80%,100%{transform:translateY(0);}

40%{transform:translateY(-30px);}

60%{transform:translateY(-15px);}

}

/* 弹入 */

@-webkit-keyframes bouncein{

0%{opacity:0;-webkit-transform:scale(0.3);}

50%{opacity:1;-webkit-transform:scale(1.05);}

70%{-webkit-transform:scale(0.9);}

100%{-webkit-transform:scale(1);}

}

@-moz-keyframes bouncein{

0%{opacity:0;-moz-transform:scale(0.3);}

50%{opacity:1;-moz-transform:scale(1.05);}

70%{-moz-transform:scale(0.9);}

100%{-moz-transform:scale(1);}

}

@-ms-keyframes bouncein{