工作中经常会遇到需要动画的场景，连贯动画都是用CSS实现，，但是如果遇到需要用户互动介入的动画，那纯CSS很比较吃力，也不是不能实现，需要动态修改CSS变量，而且动画容易被JS代码阻塞，导致动画卡顿，不连贯，还好，web api推出了**animation动画解决方案**，并且不会触发回流，也就是不会被阻塞，不在主线程执行，利用渲染线程处理。

先简单的写一个页面，一个背景，一个小球

接下来，点击页面，小球会移动到点击的地方

 let box = document.getElementById('box') // 小球let container = document.getElementById('container') // 画布container.onclick = function (event) {let x_ = event.pageX // 记录小球的结束位置xlet y_ = event.pageY // 记录小球的结束位置y// 记录小球的起始位置let { x,y } = box.getBoundingClientRect()// 触发动画box.animate([{transform: `translate(${x}px, ${y}px)`,offset: 0 // 执行的阶段 0%},{transform: `translate(${x_}px, ${y_}px)`,offset: 1 // 执行的阶段 100%}],{duration: 800, // 动画执行时长fill: "forwards" // 动画执行完的状态})}

我们说说他这个API怎么用，animate 动画，接收2个参数，一个动画改变的关键帧，另外一个对象，接收动画执行的参数
animate([], {})，可以看下最终实现的效果：