引言

在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. 繪製幀動畫