鲁达 欢迎大神评论指正！欢迎关注前端小白一锅！
web前端动画实现方式
GIF：以图片形式存在的动画，存储容量大，需要借助其他工具制作；
flash：需第三方工具制作，同时部分浏览器需要安装插件才能播放；
css3：浏览器对css3动画实现的编码支持还不完全；
JavaScript：可以实现上面三种动画方式实现的动画，浏览器支持度高。
所以web前端的动画实现我们推荐使用JavaScript来实现。
JavaScript动画实现的三个要素
DOM元素：DOM元素时前端动画的对象，我们使用JavaScript实现动画针对的需要“动”的东西就是DOM元素。
属性：JavaScript通过改变DOM元素的属性，从而实现动画效果，比如控制DOM元素的width和height属性，从而在页面上实现变大变小的动画效果。
定时器：通过定时器不断的去改变DOM元素的属性，从而形成动画。JavaScript有三个常用的定时器，分别是：setInterval、setTimeout和requestAnimationFrame。
定时器
setInterval
var IntervalID=setInterval（func，delay[,param1,param2,...]）;//使用定时器创建动画
clearInterval（IntervalID）；//清除动画
其中func参数为执行改变属性操作的函数，delay为触发动画的时间间隔（单位是毫秒），param为可以传入的func函数参数。只需要调用一次该定时器，动画就可以不间断执行。
setTimeout
var timeoutID=setTimeout(func,[delay,param1,param2,...]);使用定时器创建动画
clearTimeout(timeoutID);//清除动画
定时器setTimeout（）中的参数含义和setInterval中的是一致的，不同的是参数delay变成了可选参数，如果不传入delay时，默认触发动画的时间间隔为0，需要注意的是在使用setTimeout（）实现动画时需要在每一帧结束时都调用setTimeout（），setTimeout（）在延时后只执行一次动画，而setInterval（）在每次延时后都会自动开始执行动画。
requestAnimationFrame
var requestID=requestAnimationFrame（func）；//使用定时器创建动画
cancelAnimationFrame（requestID）；//清除动画
定时器requestAnimationFrame的时间间隔由显示器的刷新频率来决定，从而使得动画更加流畅且不会掉帧。它和setTimeout（）一样，在每一帧动画结束后都需要再次调用。
web前端常见动画
形变：改变元素的宽高，从而改变大小
位移：改变元素的位置
旋转：旋转元素
透明度：改变元素的透明度
几乎所有的复杂动画都是由上面四种简单动画组合而来的。
收藏转发请先关注，原创不易，谢谢关注！