前端开发常用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;} }