本文目錄導(dǎo)讀：

1. 引言
2. 1. CSS 動(dòng)畫
3. 2. JavaScript 動(dòng)畫
4. 3. CSS vs JavaScript：如何選擇？
5. 4. 結(jié)合使用：最佳實(shí)踐
6. 5. 結(jié)論

在現(xiàn)代前端開發(fā)中，動(dòng)畫是提升用戶體驗(yàn)的重要方式之一，無論是微交互、頁面過渡，還是復(fù)雜的動(dòng)態(tài)效果，動(dòng)畫都能讓網(wǎng)頁更具吸引力，實(shí)現(xiàn)前端動(dòng)畫主要有兩種方式：CSS 動(dòng)畫 和 JavaScript 動(dòng)畫，這兩種方法各有優(yōu)缺點(diǎn)，適用于不同的場(chǎng)景，本文將詳細(xì)對(duì)比 CSS 和 JavaScript 在動(dòng)畫實(shí)現(xiàn)上的差異,幫助開發(fā)者選擇最適合的方案。

---

CSS 動(dòng)畫

1 CSS 動(dòng)畫的基本實(shí)現(xiàn)方式

CSS 動(dòng)畫主要通過 @keyframes 和 transition 屬性來實(shí)現(xiàn)：

• transition：適用于簡(jiǎn)單的狀態(tài)變化，如 hover 效果、顏色漸變等。

  .box {
    width: 100px;
    height: 100px;
    background: blue;
    transition: width 1s ease-in-out;
  }
  .box:hover {
    width: 200px;
  }

• @keyframes：適用于更復(fù)雜的動(dòng)畫序列，可以定義多個(gè)關(guān)鍵幀。

  @keyframes slide {
    0% { transform: translateX(0); }
    50% { transform: translateX(100px); }
    100% { transform: translateX(0); }
  }
  .box {
    animation: slide 2s infinite;
  }

2 CSS 動(dòng)畫的優(yōu)勢(shì)

1. 性能優(yōu)化
   CSS 動(dòng)畫由瀏覽器原生支持，通常由 GPU 加速（如 transform 和 opacity 屬性），因此性能較高,尤其在移動(dòng)端表現(xiàn)優(yōu)異。

2. 代碼簡(jiǎn)潔
   只需幾行 CSS 代碼即可實(shí)現(xiàn)動(dòng)畫效果，無需額外 JavaScript 邏輯。

3. 易于維護(hù)
   動(dòng)畫邏輯與 JavaScript 代碼分離,便于管理和修改。

4. 瀏覽器優(yōu)化
   現(xiàn)代瀏覽器會(huì)對(duì) CSS 動(dòng)畫進(jìn)行優(yōu)化，減少重繪和回流（reflow）,提高渲染效率。

3 CSS 動(dòng)畫的局限性

1. 靈活性較低
   CSS 動(dòng)畫難以實(shí)現(xiàn)復(fù)雜的交互邏輯，例如基于用戶輸入（如滾動(dòng)、拖拽）的動(dòng)態(tài)效果。

2. 控制能力有限
   難以精確控制動(dòng)畫的暫停、反向播放、動(dòng)態(tài)調(diào)整速度等。

3. 兼容性問題
   某些高級(jí) CSS 動(dòng)畫屬性（如 motion-path）在舊瀏覽器中可能不支持。

---

JavaScript 動(dòng)畫

1 JavaScript 動(dòng)畫的實(shí)現(xiàn)方式

JavaScript 動(dòng)畫通常使用以下方式：

• 原生 JavaScript（如 requestAnimationFrame）

  let pos = 0;
  function animate() {
    pos += 1;
    element.style.transform = `translateX(${pos}px)`;
    if (pos < 100) requestAnimationFrame(animate);
  }
  animate();

• 動(dòng)畫庫（如 GSAP、Anime.js、Three.js）

  gsap.to(".box", { x: 100, duration: 1, repeat: -1, yoyo: true });

2 JavaScript 動(dòng)畫的優(yōu)勢(shì)

1. 高度靈活
   可以結(jié)合用戶交互（如鼠標(biāo)移動(dòng)、滾動(dòng)事件）實(shí)現(xiàn)動(dòng)態(tài)動(dòng)畫。

2. 精確控制
   可以隨時(shí)暫停、恢復(fù)、調(diào)整動(dòng)畫速度,甚至動(dòng)態(tài)修改關(guān)鍵幀。

3. 復(fù)雜動(dòng)畫支持
   適用于物理模擬、SVG 動(dòng)畫、3D 動(dòng)畫等高級(jí)效果。

4. 跨瀏覽器兼容性
   通過 polyfill 或動(dòng)畫庫,可以兼容舊版瀏覽器。

3 JavaScript 動(dòng)畫的局限性

1. 性能開銷較大
   如果優(yōu)化不當(dāng)，可能導(dǎo)致幀率下降,尤其是在低端設(shè)備上。

2. 代碼復(fù)雜度高
   相比 CSS 動(dòng)畫，JavaScript 動(dòng)畫需要更多代碼,維護(hù)成本較高。

3. 可能阻塞主線程
   如果動(dòng)畫計(jì)算邏輯復(fù)雜,可能導(dǎo)致頁面卡頓。

---

CSS vs JavaScript：如何選擇？

對(duì)比維度	CSS 動(dòng)畫	JavaScript 動(dòng)畫
性能	高（GPU 加速）	中等（依賴優(yōu)化）
靈活性	低	高
代碼復(fù)雜度	低	高
交互能力	有限	強(qiáng)大
適用場(chǎng)景	簡(jiǎn)單動(dòng)畫、UI 微交互	復(fù)雜動(dòng)畫、游戲、動(dòng)態(tài)效果

1 推薦使用 CSS 動(dòng)畫的場(chǎng)景

• 簡(jiǎn)單的過渡效果（如 hover、focus 狀態(tài)）
• 固定時(shí)間軸的動(dòng)畫（如輪播圖、加載動(dòng)畫）
• 需要高性能的移動(dòng)端動(dòng)畫

2 推薦使用 JavaScript 動(dòng)畫的場(chǎng)景

• 需要用戶交互驅(qū)動(dòng)的動(dòng)畫（如拖拽、滾動(dòng)視差）
• 復(fù)雜的物理模擬（如碰撞、彈性動(dòng)畫）
• 需要?jiǎng)討B(tài)調(diào)整的動(dòng)畫（如游戲角色移動(dòng)）
• SVG 或 Canvas 動(dòng)畫

---

結(jié)合使用：最佳實(shí)踐

在實(shí)際開發(fā)中，CSS 和 JavaScript 動(dòng)畫可以結(jié)合使用,以發(fā)揮各自的優(yōu)勢(shì)：

1. 使用 CSS 處理基礎(chǔ)動(dòng)畫（如過渡、關(guān)鍵幀動(dòng)畫），減少 JavaScript 負(fù)擔(dān)。
2. 使用 JavaScript 處理交互邏輯（如滾動(dòng)動(dòng)畫、動(dòng)態(tài)調(diào)整參數(shù)）。
3. 利用 Web Animation API（WAAPI）結(jié)合兩者的優(yōu)點(diǎn)：

   const element = document.querySelector('.box');
   element.animate([
     { transform: 'translateX(0)' },
     { transform: 'translateX(100px)' }
   ], { duration: 1000, iterations: Infinity });

---

CSS 動(dòng)畫和 JavaScript 動(dòng)畫各有適用場(chǎng)景：

• CSS 動(dòng)畫 適用于簡(jiǎn)單、高性能的動(dòng)畫，適合 UI 微交互和固定時(shí)間軸動(dòng)畫。
• JavaScript 動(dòng)畫 適用于復(fù)雜、交互性強(qiáng)的動(dòng)畫，適合游戲、動(dòng)態(tài)效果和高級(jí)交互。

在實(shí)際項(xiàng)目中，開發(fā)者應(yīng)根據(jù)需求選擇合適的方案，甚至結(jié)合兩者,以達(dá)到最佳性能和用戶體驗(yàn)。