聊到动画我们首先想到CSS3，JS动画，哪种在实现无限循环更优呢？这里总结下涉及的知识点，以及基本无限循环动画的实现，还有优劣势分析。

下面以如下HTML元素，实现元素从左往右，再从右往左无限循环的动画。

CSS3动画

animation

看看CSS3 animation动画属性。

linear | ease | ease-in | ease-out | ease-in-out

2. 三次贝塞尔曲线

cubic-bezier(n,n,n,n)，值的范围是0到1的数值

@keyframes

关键帧的意思，定义动画在不同阶段的状态。通常将它分为0%，50%，100%三个状态。

相关理论知识学完了，看下以下代码实现：

优缺点

优点：

浏览器可以对动画进行优化，相应的点如下：

缺点：

JS动画

编写动画函数：

let animationFun = function(){
	let box = document.getElementById('box')
	let pos = 0  // 起始位置
	let end = 500 // 终点位置
	let step = 10 // 步长
	let toRight = true // 方向
	return function animate(box，pos，end，step，toRight){
   	if(toRight){
      	if(pos<=end ){
         	pos+=step
         	toRight = pos>=end?false:true
      	}
   	}else{
      	pos-=step
      	toRight = pos<=0?true:false
   	}
   	box.style.left = pos+'px'
	}
}

setInterval

通过setInterval实现循环，时间为1000/60，因为大多数浏览器渲染是60帧/s

let animate = animationFun()
let timer = setInterval(function(){
    animate()
},1000/60) 

requestAnimationFrame

requestAnimationFrame 是个动画框架，它的优势如下：

let animate = animateFun()
function animloop() {
   animate();
   window.requestAnimationFrame(animloop);
}
animloop()

优缺点

优点：

缺点：

总结

最后再解答个问题？为啥CSS3动画比JS动画更流畅？

渲染线程分为主线程和合成器线程。如果CSS动画只改变transform、opacity两种属性，则此时动画直接在合成器线程完成。采用JS动画，会在主线程进行，然后触发合成器线程进行下步操作。若此时JS线程执行昂贵的任务，主线程繁忙，会造成失帧堵塞，此时采用CSS动画更流畅。因此，CSS3动画比JS动画流畅是基于一定前提的：

因为触发了重绘或者重排，都需要主线程进行Layer树的重新计算，这时动画都会阻塞后续操作。不触发重绘重排的属性有：transfrom|opacity|perspective-origin|perspective|backface-visibility

至此，我们借助实现无限循环的动画例子，学习了CSS3动画以及JS动画，以及之前的优劣势。简而言之，不需要中间过程控制，只是简单状态切换，选CSS动画。若需复杂动画、进行过程控制等，选JS动画。

附：