自己写的几个常用css动画（自己收藏用）

/*向左移动并弹性显示*/
@-webkit-keyframes fadeToLeftTan{
	0%{ -webkit-transform:translateX(100%); opacity:0;}
	70%{ -webkit-transform:translateX(-5%); opacity:1;}
	80%{ -webkit-transform:translateX(2%); opacity:1;}
	90%{ -webkit-transform:translateX(-2%); opacity:1;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeToLeftTan{
	0%{ transform:translateX(100%); opacity:0;}
	70%{ transform:translateX(-5%); opacity:1;}
	80%{ transform:translateX(2%); opacity:1;}
	90%{ transform:translateX(-2%); opacity:1;}
	100%{ transform:translateX(0); opacity:1;}
}
/*向右移动并弹性显示*/
@-webkit-keyframes fadeToRightTan{
	0%{ -webkit-transform:translateX(-100%); opacity:0;}
	70%{ -webkit-transform:translateX(5%); opacity:1;}
	80%{ -webkit-transform:translateX(-2%); opacity:1;}
	90%{ -webkit-transform:translateX(2%); opacity:1;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeToRightTan{
	0%{ transform:translateX(-100%); opacity:0;}
	70%{ transform:translateX(5%); opacity:1;}
	80%{ transform:translateX(-2%); opacity:1;}
	90%{ transform:translateX(2%); opacity:1;}
	100%{ transform:translateX(0); opacity:1;}
}
/*向上移动并弹性显示*/
@-webkit-keyframes fadeToTopTan{
	0%{ -webkit-transform:translateY(100%); opacity:0;}
	70%{ -webkit-transform:translateY(-5%); opacity:1;}
	80%{ -webkit-transform:translateY(2%); opacity:1;}
	90%{ -webkit-transform:translateY(-2%); opacity:1;}
	100%{ -webkit-transform:translateY(0); opacity:1;}
}
@keyframes fadeToTopTan{
	0%{ transform:translateY(100%); opacity:0;}
	70%{ transform:translateY(-5%); opacity:1;}
	80%{ transform:translateY(2%); opacity:1;}
	90%{ transform:translateY(-2%); opacity:1;}
	100%{ transform:translateY(0); opacity:1;}
}
/*向下移动并弹性显示*/
@-webkit-keyframes fadeToDownTan{
	0%{ -webkit-transform:translateY(-100%); opacity:0;}
	70%{ -webkit-transform:translateY(5%); opacity:1;}
	80%{ -webkit-transform:translateY(-2%); opacity:1;}
	90%{ -webkit-transform:translateY(2%); opacity:1;}
	100%{ -webkit-transform:translateY(0); opacity:1;}
}
@keyframes fadeToDownTan{
	0%{ transform:translateY(-100%); opacity:0;}
	70%{ transform:translateY(5%); opacity:1;}
	80%{ transform:translateY(-2%); opacity:1;}
	90%{ transform:translateY(2%); opacity:1;}
	100%{ transform:translateY(0); opacity:1;}
}
/*从大向小变化弹性显示*/
@-webkit-keyframes fadeInMaxToMinTan{
	0%{ -webkit-transform:scale(2); opacity:0;}
	70%{ -webkit-transform:scale(.9); opacity:1;}
	85%{ -webkit-transform:scale(1.1); opacity:1;}
	100%{ -webkit-transform:scale(1); opacity:1;}
}
@keyframes fadeInMaxToMinTan{
	0%{ transform:scale(2); opacity:0;}
	70%{ transform:scale(.9); opacity:1;}
	85%{ transform:scale(1.1); opacity:1;}
	100%{ transform:scale(1); opacity:1;}
}
/*从小向大变化弹性显示*/
@-webkit-keyframes fadeInMinToMaxTan{
	0%{ -webkit-transform:scale(0); opacity:0;}
	70%{ -webkit-transform:scale(1.1); opacity:1;}
	85%{ -webkit-transform:scale(.9); opacity:1;}
	100%{ -webkit-transform:scale(1); opacity:1;}
}
@keyframes fadeInMinToMaxTan{
	0%{ transform:scale(0); opacity:0;}
	70%{ transform:scale(1.1); opacity:1;}
	85%{ transform:scale(.9); opacity:1;}
	100%{ transform:scale(1); opacity:1;}
}

/**********************************/

/*向左移动显示*/
@-webkit-keyframes fadeToLeft{
	0%{ -webkit-transform:translateX(100%); opacity:0;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeToLeft{
	0%{ transform:translateX(100%); opacity:0;}
	100%{ transform:translateX(0); opacity:1;}
}
/*向右移动显示*/
@-webkit-keyframes fadeToRight{
	0%{ -webkit-transform:translateX(-100%); opacity:0;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeToRight{
	0%{ transform:translateX(-100%); opacity:0;}
	100%{ transform:translateX(0); opacity:1;}
}
/*向上移动显示*/
@-webkit-keyframes fadeToTop{
	0%{ -webkit-transform:translateY(100%); opacity:0;}
	100%{ -webkit-transform:translateY(0); opacity:1;}
}
@keyframes fadeToTop{
	0%{ transform:translateY(100%); opacity:0;}
	100%{ transform:translateY(0); opacity:1;}
}
/*向上60移动显示*/
@-webkit-keyframes fadeToTop60{
	0%{ -webkit-transform:translateY(60px); opacity:0;}
	100%{ -webkit-transform:translateY(0); opacity:1;}
}
@keyframes fadeToTop60{
	0%{ transform:translateY(60px); opacity:0;}
	100%{ transform:translateY(0); opacity:1;}
}
/*向下移动显示*/
@-webkit-keyframes fadeToDown{
	0%{ -webkit-transform:translateY(-100%); opacity:0;}
	100%{ -webkit-transform:translateY(0); opacity:1;}
}
@keyframes fadeToDown{
	0%{ transform:translateY(-100%); opacity:0;}
	100%{ transform:translateY(0); opacity:1;}
}
/*向下60移动显示*/
@-webkit-keyframes fadeToDown60{
	0%{ -webkit-transform:translateY(-60px); opacity:0;}
	100%{ -webkit-transform:translateY(0); opacity:1;}
}
@keyframes fadeToDown60{
	0%{ transform:translateY(-60px); opacity:0;}
	100%{ transform:translateY(0); opacity:1;}
}

/**********************************/

/*上下微移漂浮*/
@-webkit-keyframes flashTopDown{
	0%{ -webkit-transform:translateY(0); opacity:1;}
	100%{ -webkit-transform:translateY(8px); opacity:.8;}
}
@keyframes flashTopDown{
	0%{ transform:translateY(0); opacity:1;}
	100%{ transform:translateY(8px); opacity:.8;}
}

/**********************************/

/*从大向小变化显示*/
@-webkit-keyframes fadeInMaxToMin{
	0%{ -webkit-transform:scale(2); opacity:0;}
	100%{ -webkit-transform:scale(1); opacity:1;}
}
@keyframes fadeInMaxToMin{
	0%{ transform:scale(2); opacity:0;}
	100%{ transform:scale(1); opacity:1;}
}
/*从小向大变化显示*/
@-webkit-keyframes fadeInMinToMax{
	0%{ -webkit-transform:scale(0); opacity:0;}
	100%{ -webkit-transform:scale(1); opacity:1;}
}
@keyframes fadeInMinToMax{
	0%{ transform:scale(0); opacity:0;}
	100%{ transform:scale(1); opacity:1;}
}

/**********************************/

/*大小闪动变化   变小*/
@-webkit-keyframes flashMaxMin{
	0%{ -webkit-transform:scale(1);}
	100%{ -webkit-transform:scale(.98);}
}
@keyframes flashMaxMin{
	0%{ transform:scale(1);}
	100%{ transform:scale(.98);}
}
/*大小闪动变化变大*/
@-webkit-keyframes flashMax{
    0%{ -webkit-transform:scale(1);}
    100%{ -webkit-transform:scale(1.05);}
}  
@keyframes flashMax{
    0%{ transform:scale(1);}
    100%{ transform:scale(1.05);}
}

/**********************************/

/*渐显*/
@-webkit-keyframes fadeIn{
	0%{ opacity:0;}
	100%{ opacity:1;}
}
@keyframes fadeIn{
	0%{ opacity:0;}
	100%{ opacity:1;}
}
/*渐隐*/
@-webkit-keyframes fadeOut{
	0%{ opacity:1;}
	100%{ opacity:0;}
}
@keyframes fadeOut{
	0%{ opacity:1;}
	100%{ opacity:0;}
}

压缩后：

@-webkit-keyframes fadeToLeftTan{0%{-webkit-transform:translateX(100%);opacity:0}70%{-webkit-transform:translateX(-5%);opacity:1}80%{-webkit-transform:translateX(2%);opacity:1}90%{-webkit-transform:translateX(-2%);opacity:1}100%{-webkit-transform:translateX(0);opacity:1}}@keyframes fadeToLeftTan{0%{transform:translateX(100%);opacity:0}70%{transform:translateX(-5%);opacity:1}80%{transform:translateX(2%);opacity:1}90%{transform:translateX(-2%);opacity:1}100%{transform:translateX(0);opacity:1}}@-webkit-keyframes fadeToRightTan{0%{-webkit-transform:translateX(-100%);opacity:0}70%{-webkit-transform:translateX(5%);opacity:1}80%{-webkit-transform:translateX(-2%);opacity:1}90%{-webkit-transform:translateX(2%);opacity:1}100%{-webkit-transform:translateX(0);opacity:1}}@keyframes fadeToRightTan{0%{transform:translateX(-100%);opacity:0}70%{transform:translateX(5%);opacity:1}80%{transform:translateX(-2%);opacity:1}90%{transform:translateX(2%);opacity:1}100%{transform:translateX(0);opacity:1}}@-webkit-keyframes fadeToTopTan{0%{-webkit-transform:translateY(100%);opacity:0}70%{-webkit-transform:translateY(-5%);opacity:1}80%{-webkit-transform:translateY(2%);opacity:1}90%{-webkit-transform:translateY(-2%);opacity:1}100%{-webkit-transform:translateY(0);opacity:1}}@keyframes fadeToTopTan{0%{transform:translateY(100%);opacity:0}70%{transform:translateY(-5%);opacity:1}80%{transform:translateY(2%);opacity:1}90%{transform:translateY(-2%);opacity:1}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes fadeToDownTan{0%{-webkit-transform:translateY(-100%);opacity:0}70%{-webkit-transform:translateY(5%);opacity:1}80%{-webkit-transform:translateY(-2%);opacity:1}90%{-webkit-transform:translateY(2%);opacity:1}100%{-webkit-transform:translateY(0);opacity:1}}@keyframes fadeToDownTan{0%{transform:translateY(-100%);opacity:0}70%{transform:translateY(5%);opacity:1}80%{transform:translateY(-2%);opacity:1}90%{transform:translateY(2%);opacity:1}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes fadeInMaxToMinTan{0%{-webkit-transform:scale(2);opacity:0}70%{-webkit-transform:scale(.9);opacity:1}85%{-webkit-transform:scale(1.1);opacity:1}100%{-webkit-transform:scale(1);opacity:1}}@keyframes fadeInMaxToMinTan{0%{transform:scale(2);opacity:0}70%{transform:scale(.9);opacity:1}85%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}@-webkit-keyframes fadeInMinToMaxTan{0%{-webkit-transform:scale(0);opacity:0}70%{-webkit-transform:scale(1.1);opacity:1}85%{-webkit-transform:scale(.9);opacity:1}100%{-webkit-transform:scale(1);opacity:1}}@keyframes fadeInMinToMaxTan{0%{transform:scale(0);opacity:0}70%{transform:scale(1.1);opacity:1}85%{transform:scale(.9);opacity:1}100%{transform:scale(1);opacity:1}}@-webkit-keyframes fadeToLeft{0%{-webkit-transform:translateX(100%);opacity:0}100%{-webkit-transform:translateX(0);opacity:1}}@keyframes fadeToLeft{0%{transform:translateX(100%);opacity:0}100%{transform:translateX(0);opacity:1}}@-webkit-keyframes fadeToRight{0%{-webkit-transform:translateX(-100%);opacity:0}100%{-webkit-transform:translateX(0);opacity:1}}@keyframes fadeToRight{0%{transform:translateX(-100%);opacity:0}100%{transform:translateX(0);opacity:1}}@-webkit-keyframes fadeToTop{0%{-webkit-transform:translateY(100%);opacity:0}100%{-webkit-transform:translateY(0);opacity:1}}@keyframes fadeToTop{0%{transform:translateY(100%);opacity:0}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes fadeToTop60{0%{-webkit-transform:translateY(60px);opacity:0}100%{-webkit-transform:translateY(0);opacity:1}}@keyframes fadeToTop60{0%{transform:translateY(60px);opacity:0}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes fadeToDown{0%{-webkit-transform:translateY(-100%);opacity:0}100%{-webkit-transform:translateY(0);opacity:1}}@keyframes fadeToDown{0%{transform:translateY(-100%);opacity:0}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes fadeToDown60{0%{-webkit-transform:translateY(-60px);opacity:0}100%{-webkit-transform:translateY(0);opacity:1}}@keyframes fadeToDown60{0%{transform:translateY(-60px);opacity:0}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes flashTopDown{0%{-webkit-transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(8px);opacity:.8}}@keyframes flashTopDown{0%{transform:translateY(0);opacity:1}100%{transform:translateY(8px);opacity:.8}}@-webkit-keyframes fadeInMaxToMin{0%{-webkit-transform:scale(2);opacity:0}100%{-webkit-transform:scale(1);opacity:1}}@keyframes fadeInMaxToMin{0%{transform:scale(2);opacity:0}100%{transform:scale(1);opacity:1}}@-webkit-keyframes fadeInMinToMax{0%{-webkit-transform:scale(0);opacity:0}100%{-webkit-transform:scale(1);opacity:1}}@keyframes fadeInMinToMax{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@-webkit-keyframes flashMaxMin{0%{-webkit-transform:scale(1)}100%{-webkit-transform:scale(.98)}}@keyframes flashMaxMin{0%{transform:scale(1)}100%{transform:scale(.98)}}@-webkit-keyframes flashMax{0%{-webkit-transform:scale(1)}100%{-webkit-transform:scale(1.05)}}@keyframes flashMax{0%{transform:scale(1)}100%{transform:scale(1.05)}}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}