/* 淡入-从上 */
@-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;}
}
@-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-key