JS动画：
• 优点：
1. 过程控制，可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
2. 动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有JavaScript动画才能完成。
3. CSS3有兼容性问题，而JS大多时候没有兼容性问题。
• 缺点：
1. JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。
2. 代码的复杂度高于CSS动画。
CSS动画：
• 优点（浏览器可以对动画进行优化）：
1. 集中所有DOM，一次重绘重排，刷新频率和浏览器刷新频率相同。
2. 代码简单，方便调试
3. 不可见元素不参与重排，节约CPU
4. 可以使用硬件加速（通过 GPU 来提高动画性能）。
• 缺点：
1. 运行过程控制较弱，无法附加事件绑定回调函数。CSS动画只能暂停，不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或是绑定回放事件，无进度报告。
2. 代码冗长。
1.css动画
动画使元素逐渐从一种样式变为另一种样式。您可以随意更改任意数量的 CSS 属性如需使用 CSS 动画，您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
@keyframes 规定动画
animation 所有动画的简写属性
animation-name 需要绑定到选择器的keyframe属性
animation-timing-function 动画的速度曲线
animation-delay 动画开始之前的延迟
animation-iteration-count 动画应该播放的次数
animation-diretion 是否应该轮流反向播放动画
2.js动画
requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。与setTimeout和setInterval不同，requestAnimationFrame不需要设置时间间隔。
【1】requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
【2】在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量
【3】requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style>
#e {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
zoom: 1;
}
</style>
</head>
<body>
<div id="e"></div>
<script>
var e = document.getElementById("e");
var flag = true;
var left = 0;
var rafId = null
function render() {
if (flag == true) {
if (left >= 100) {
flag = false
}
e.style.left = ` ${left++}px`
} else {
if (left <= 0) {
flag = true
}
e.style.left = ` ${left--}px`
}
}
//requestAnimationFrame效果
(function animloop(time) {
console.log(time, Date.now())
render();
rafId = requestAnimationFrame(animloop);
//如果left等于50 停止动画
// if (left == 50) {
// cancelAnimationFrame(rafId)
// }
})();
//setInterval效果
// setInterval(function() {
// render()
// }, 1000 / 60)
</script>
</body>
</html>
