为什么需要动画
- 利用动画给项目增加活力，增强用户体验
- 有策略的设计动画来增强用户交互，避免不必要的动画干扰或打断用户操作
- 合理选择适当的属性来设计动画，一些属性的开销比较大，反而可能会影响项目的性能表现
CSS动画 VS JS动画
何时使用CSS动画或JS动画
- 如果你要为UI元素实现简单的“一次性”状态转换，请使用css动画
- 如果你需要对动画效果进行大量控制时，请使用JS动画。web animation api
- 如果您需要手动协调整个场景，可直接使用 requestAnimationFrame.
实现上的区别
- CSS动画：声明式，可用css3 animation API控制关键帧，浏览器会自动补全中间状态。结合JS可以通过JS控制状态，移除/添加class来触发CSS动画。
- JS动画：命令式，通过web animation API可对动画过程实施更精确的控制。
缓动（Easing）
自然界中，受重力、摩擦力等的影响，几乎没有事务是匀速运动的。我们大脑总是在期待这样的运动，因此我们在设计动画时，也应该遵循这样的规律。
线性动画
没有任何缓动的动画称为线性动画。应该尽量避免使用线性动画
缓入动画
缓入动画开头慢结尾快，与缓出动画正好相反。
从交互的角度来看，缓入可能让人感觉有点不寻常，因为结尾很突然；在现实中移动的物体往往是减速，而不是突然停止。缓入还有让人感觉行动迟缓的不利效果，这会对网站或应用的响应速度给人的感觉产生负面影响。
缓出动画
缓出使动画在开头处比线性动画更快，还会在结尾处减速。
缓出一般最适合界面，因为开头时快速使动画有反应快的感觉，同时在结尾仍允许有一点自然的减速。
缓入缓出动画
缓入并缓出与汽车加速和减速相似，使用得当时，可以实现比单纯缓出更生动的效果。
由于缓入开头让动画有迟钝感，因此动画持续时间不要过长。300-500 毫秒的时间范围通常比较合适，但实际的数量主要取决于项目的感觉。也就是说，由于开头慢、中间快和结尾慢，动画将有更强的对比，可能让用户感到非常满意。
自定义缓动
您可以通过定义三次贝塞尔曲线来定义时间。
更改每个控制点的 X 和 Y 值将实现截然不同的曲线，从而使动画有截然不同的感觉。例如，如果第一个控制点在右下角，则动画在开头缓慢。如果它在左上角，动画在开头会显得很快。相反，如果第二控制点在网格的右下角，则动画在结尾处变快；而在左上角时，动画将在结尾处变慢。
// 示例
transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
设计动画（不对称的动画定时）
（不对称的动画定时）可让您在表达个性的同时快速响应用户交互，从而提升用户体验。还能使感觉出现对比，使界面在视觉上更吸引人。
一般的经验法则为：
- 对于用户交互触发的 UI 动画，例如视图变换或显示元素，采用快速前奏（短持续时间）和慢速结尾（较长持续时间）。
- 对于由代码触发的 UI 动画，例如错误或模态视图，采用较慢前奏（较长持续时间）和快速结尾（短持续时间）。
动画性能
在设置动画时应保持 60fps，因为任何卡顿或停顿都会引起用户注意，并对其体验产生负面影响。
- 确保了解对指定属性设置css动画的影响，不能导致性能问题。
- 改变页面结构或触发绘制的动画十分消耗资源，应该减少重绘和重排
- 尽可能只是改变opacity和transform属性
- 在动画的地方使用will-change属性指定可能产生动画效果的属性，来确保浏览器知道你打算对什么设置动画。
请勿过度使用 will-change，因为过度使用可能导致浏览器浪费资源，进而引起其他性能问题
附
- css triggers：查看哪些css属性修改会导致浏览器重绘/重排/合成css triggers
- easings.net/cn: 查看缓动函数easing.net
