/*向左移动并弹性显示*/
@-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;}
}最后，想学习前端的小伙伴们！
如果还在IT编程的世界里迷茫，不知道自己的未来规划，学习没有动力，东也学一下，西也学习一下，那你可以加入web前端学习交流群：539738200, 里面有大神一起交流并走出迷茫。新手可进群免费领取学习资料，分享一些学习的方法和需要注意的小细节，每晚八点也会准时的讲一些前端的小案例项目。
点击：加入群
如果想看到更加系统的文章和学习方法经验可以关注的微信号：‘web前端技术圈’或者‘webxh6’关注后回复‘2019’可以领取一套完整的学习视频