引言

在web应用中，前端同学在实现动画效果时往往常用的几种方案：

1. css3 transition / animation - 实现过渡动画
2. setInterval / setTimeout - 通过设置一个间隔时间来不断的改变图像的位置
3. requestAnimationFrame - 通过一个回调函数来改变图像位置，由系统来决定这个回调函数的执行时机，比定时修改的性能更好，不存在失帧现象

在大多数需求中，css3的 transition / animation 都能满足我们的需求，并且相对于js实现，可以大大提升我们的开发效率，降低开发成本。

本篇文章将着重对 animation 的使用做个总结，如果你的工作中动画需求较多，相信本篇文章能够让你有所收获：

• Animation 常用动画属性
• Animation 实现不间断播报
• Animation 实现回弹效果
• Animation 实现直播点赞效果 ❤️
• Animation 与 Svg 又会擦出怎样的火花呢？
  1. Loading 组件
  2. 进度条组件
• Animation steps() 运用⏰
  1. 实现打字效果
  2. 绘制帧动画