.jpg)
在網(wǎng)頁開發(fā)中，transition適合簡(jiǎn)單狀態(tài)過渡，animation適合復(fù)雜動(dòng)畫控制。transition用于按鈕懸停、表單焦點(diǎn)等簡(jiǎn)單效果，優(yōu)點(diǎn)是寫法簡(jiǎn)單、性能好，但僅限兩狀態(tài)過渡且不可控過程；animation配合keyframes實(shí)現(xiàn)多階段動(dòng)畫，適用于加載動(dòng)畫、頁面動(dòng)效，優(yōu)點(diǎn)是控制力強(qiáng)但語法復(fù)雜；選擇時(shí)若只需兩個(gè)狀態(tài)變化用transition，需多階段或循環(huán)則用animation，復(fù)雜邏輯可結(jié)合JS；此外注意使用transform和opacity提升性能，避免過度動(dòng)畫并考慮瀏覽器兼容性。
在網(wǎng)頁開發(fā)中，用 css 做動(dòng)畫是常見的需求。transition 和 animation 是兩個(gè)常用的實(shí)現(xiàn)方式，各有適用場(chǎng)景和優(yōu)缺點(diǎn)。簡(jiǎn)單來說：transition 更適合簡(jiǎn)單的狀態(tài)變化，animation 更適合復(fù)雜、可控的動(dòng)畫序列。
一、transition：適合簡(jiǎn)單狀態(tài)過渡
transition 的核心在于“狀態(tài)之間的平滑切換”。比如一個(gè)按鈕 hover 時(shí)改變顏色或大小，就可以用 transition 實(shí)現(xiàn)。
使用場(chǎng)景：
- 按鈕懸停效果
- 表單元素獲得焦點(diǎn)時(shí)的變化
- 簡(jiǎn)單的展開/收起動(dòng)畫
優(yōu)點(diǎn)：
- 寫法簡(jiǎn)單，代碼量少
- 性能較好，瀏覽器優(yōu)化充分
- 不需要 keyframes，邏輯清晰
缺點(diǎn)：
- 只能在兩個(gè)狀態(tài)之間過渡（如 from → to）
- 動(dòng)畫過程不可控，不能做多階段動(dòng)畫
- 觸發(fā)條件有限（通常是 hover、focus、class 變化）
舉個(gè)例子：
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
.button { background-color: blue; transition: background-color 0.3s ease; } .button:hover { background-color: red; }
這樣就能實(shí)現(xiàn)一個(gè)顏色漸變的 hover 效果。
二、animation：適合復(fù)雜動(dòng)畫控制
animation 需要配合 @keyframes 使用，可以定義多個(gè)關(guān)鍵幀，實(shí)現(xiàn)更豐富的動(dòng)畫流程。
使用場(chǎng)景：
- 加載動(dòng)畫（如旋轉(zhuǎn)的 loading 圓圈）
- 頁面進(jìn)入/離開動(dòng)效
- 多階段動(dòng)畫（比如先放大再縮小）
優(yōu)點(diǎn)：
- 控制力強(qiáng)，可以定義多個(gè)關(guān)鍵幀
- 支持循環(huán)播放、延遲啟動(dòng)等高級(jí)設(shè)置
- 不依賴用戶交互也能自動(dòng)播放
缺點(diǎn)：
- 語法相對(duì)復(fù)雜，特別是寫 keyframes 時(shí)
- 過度使用可能影響性能（尤其是大量 dom 元素動(dòng)畫）
- 調(diào)試起來比 transition 困難一些
示例代碼：
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .spinner { animation: spin 1s linear infinite; }
這個(gè)例子實(shí)現(xiàn)了一個(gè)無限旋轉(zhuǎn)的加載圖標(biāo)。
三、如何選擇？看你的需求
- 只需要兩個(gè)狀態(tài)之間的平滑變化？
? 用 transition，簡(jiǎn)潔高效。 - 需要多個(gè)階段、循環(huán)播放、自定義節(jié)奏？
? 用 animation，靈活強(qiáng)大。 - 動(dòng)畫邏輯復(fù)雜，甚至涉及 JS 控制？
? 可以考慮結(jié)合 JS 或用 JavaScript 動(dòng)畫庫（如 GSAP），但優(yōu)先嘗試 CSS 解決。
四、小貼士：注意兼容性和性能
- 硬件加速：
對(duì) transform 和 opacity 使用動(dòng)畫更容易觸發(fā) GPU 加速，性能更好。 - 避免過度動(dòng)畫：
太多動(dòng)畫會(huì)影響用戶體驗(yàn)和頁面流暢度，尤其是在低端設(shè)備上。 - 瀏覽器兼容性：
雖然現(xiàn)代瀏覽器都支持 transition 和 animation，但在舊版瀏覽器中仍需添加前綴（如 -webkit-）。
基本上就這些。transition 和 animation 各有長(zhǎng)處，理解它們的差異，才能寫出既好看又高效的動(dòng)畫效果。
.png)
