前端开发常用css动画代码

时间：2020-07-17 19:33:49 阅读：70 评论：0 收藏：0 [点我收藏+]

标签：css frame scale site shm 变化 tran sites key

/*向左移动并弹性显示*/

@-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;}
}

字由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;}
}

前端开发常用css动画代码

标签：css frame scale site shm 变化 tran sites key

原文地址：https://www.cnblogs.com/ypppt/p/13332160.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行