（自己收藏用）前端开发常用CSS3动画代码

用户5997198

发布于 2022-03-28 19:45:58

7090

发布于 2022-03-28 19:45:58

文章被收录于专栏：蚂蚁开源社区

我们在做项目的时候经常会遇到一样的头部和底部，如果每个页面都复制一遍，不仅工作量大而且万一需要修改一下文章就更麻烦了，这时候就需要我们把公共部分提取出来，等需要的时候再引入页面。在网上找了好久，也尝试了几次，觉得对前端来说最好的方法就是使用jQuery的load函数。

/*导入头部和尾部*/
$(document).ready(function(){
   $(".footer").load("page/footer.html");
});

但是注意，此时的footer.html不需要是完整的HTML（当时本人自己可是遇到了这个大坑，都是泪/(ㄒoㄒ)/~~），这包含标签内容即可。

<!--footer.html页面-->
<footer>
<ul class="g-flex">
<li class="g-flex-auto"><a href="#" class="i-b">首页</a></li>
<li class="g-flex-auto"><a href="#" class="i-b">分类</a></li>
<li class="g-flex-auto"><a href="#" class="i-b">订单</a></li>
<li class="g-flex-auto"><a href="#" class="i-b">我的</a></li>
</ul>
</footer>

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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-03-21，如有侵权请联系 cloudcommunity@tencent.com 删除

html