一、使用CSS3动画代替JS动画
JS动画频繁操作DOM导致效率非常低
在频繁的操作DOM和CSS时，浏览器会不停的执行重排（reflow）和重绘（repaint）
可以避免占用JS主线程
这边就不细说这两者具体的低优缺点。一般做2D动画的话,可以使用CSS3的transition或animation
二、CSS3动画animation属性(可直接跳转)简写:
//模板 animation: name duration timing-function delay iteration-count direction fill-mode play-state; //实例 animation: myAnimationName 2s linear 1s infinite forward;细说
animation-name(必填) //规定动画名称 animation-duration(必填) //完成动画的时间 //值：time(1s.2s...) 默认值为 0，意味着没有动画效果 animation-timing-function(常用) //动画运动的速度 /* 值： linear 匀速 ease(默认) 变速(先慢后快,再由快变慢) ease-in 低速开始 ease-out 低速结束 ease-in-out 低速开始和结束 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值 */ animation-delay //动画在启动前的延迟间隔 //值：time 默认值为 0 animation-iteration-count(常用) //动画的播放次数 /* 值：number 默认值1 infinite 动画无限次播放 */ animation-direction //是否轮流反向播放动画 /* 值: normal 正常 reverse 反向播放 alternate 在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放 alternate-reverse 在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放 */ animation-fill-mode(常用) //当动画不播放时当动画完成时.要处于什么状态 /* 值： none 默认，播放完动画后，画面停在起始位置 forwards 播放完动画，停在animation定义的最后一帧(保持最后一个属性值) backwards 如果设置了animation-delay，在开始到delay这段时间，画面停在第一帧。如果没有设置delay，画面是元素设置的初始值 */ animation-play-state //动画是否正在运行或已暂停 /* 值： paused 指定暂停动画 running 指定正在运行的动画，默认 */ 三、两个案例:CSS3实现弹窗、轮播 1. CSS3实现弹窗效果
效果图
代码实现
//html <body> <div> <button>弹窗</button> </div> <div> <p>我是弹窗内容</p> <button>关闭</button> </div> </body> //css /*button样式*/ .btnDiv{ text-align: center; } .openPopUpBtn,.closePopUpBtn{ width:60px; height:40px; line-height:40px; border:1px solid #c9c9c9; background-color: #FFF; box-shadow: 1px 1px 1px 1px #eee; } .openPopUpBtn{ margin-top:50px; } .openPopUpBtn:hover,.closePopUpBtn:hover{ background-color: #eee; cursor:pointer; } /*弹框样式*/ .popUp{ width:600px; height:500px; text-align: center; background-color: #FFFeee; border:1px solid #ccc; box-shadow: 1px 1px 1px 1px #eee; position:absolute; left:50%; margin-left:-300px; opacity: 0; /* 透明度为0 */ } .closePopUpBtn{ position: absolute; bottom:20px; left:50%; transform:translate(-50%); }html结构比较简单,一个按钮、一个弹窗。样式大家可以自行选择,这部分不是重点.
下面是实现的核心！！！！ ⬇️
我们先看JS部分,仅仅只是实现点击功能,不做JS动画
window.onload = function(){ var popUp = document.getElementsByClassName(\'popUp\'); //获取div.popUp的DOM节点,注意！popUp此时是一个数组 var openBtn = document.getElementById(\'openBtn\'); //获取点击按钮的DOM节点 var closeBtn = document.getElementById(\'closeBtn\'); //获取弹框里面关闭按钮的DOM节点 //点击弹窗按钮触发事件 openBtn.onclick = function(){ //给div.popUp添加一个名叫showCont的id,随后该id执行对应动画 popUp[0].setAttribute(\'id\',\'showCont\'); } //点击关闭按钮触发事件 closeBtn.onclick = function(){ //给div.popUp添加一个名叫hiddenCont的id,随后该id执行对应动画 popUp[0].setAttribute(\'id\',\'hiddenCont\'); } }再来看一下重点CSS3动画部分
/*定义CSS样式*/ /*定义打开弹窗动画*/ #showCont{ animation: showPopUp 1s; animation-fill-mode: forwards; /*保持动画后的状态*/ } /*定义关闭弹窗动画*/ #hiddenCont{ animation: hiddenPopUp 1s; animation-fill-mode: forwards; } /*定义动画规则*/ //打开弹窗动画 @keyframes showPopUp{ 0%{ opacity: 0; top:-60%; transform: rotateZ(0deg); //初始透明度为0,位于顶部-60%位置,旋转Z轴为0 } 50%{ transform: rotateZ(-10deg); //动画进行一半的时候,规定旋转Z轴为-10度 //此时透明度和顶部位置都会自动计算 } 100%{ opacity: 1; top:20%; transform: rotateZ(0deg); //动画结束后的最终参数 } } //关闭弹窗动画 和打开动画相反即可 @keyframes hiddenPopUp{ 0%{ opacity: 1; top:20%; transform: rotateZ(0deg); } 50%{ transform: rotateZ(-10deg); } 100%{ opacity: 0; top:-60%; transform: rotateZ(0deg); } }至此我们第一个案例:CSS3动画实现弹窗就完成啦。