/*向左移动并弹性显示*/
@-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 fadeToLeftTan0%{ 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 fadeToTopTan0%{ -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 fadeToTop0%{ -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;}}
字由https://www.wode007.com/sites/73248.html 中国字体设计网https://www.wode007.com/sites/73245.html
/*渐隐*/
@-webkit-keyframes fadeOut{0%{ opacity:1;}100%{ opacity:0;}}@keyframes fadeOut{0%{ opacity:1;}100%{ opacity:0;}}
联系客服