要使CSS動畫順滑，需選對屬性、控制節(jié)奏並減少重排重繪。 1.優(yōu)先使用transform、opacity 等高性能屬性，避免頻繁觸發(fā)重排的width、height；2.合理設(shè)置過渡時間（0.2s~0.5s）與函數(shù)，如ease-in-out 或自定義cubic-bezier 曲線；3.避免JS 中頻繁同步修改樣式導(dǎo)致佈局抖動，改用requestAnimationFrame 或交由CSS 處理；4.適當(dāng)啟用硬件加速，如translateZ(0)，但慎用will-change 以免佔(zhàn)用過多內(nèi)存。

CSS transitions 和animations 是提升網(wǎng)頁交互體驗(yàn)的重要工具，但要做得“順滑”並不只是加個transition: all 0.3s就行。關(guān)鍵在於理解它們的工作機(jī)制，並根據(jù)實(shí)際場景做優(yōu)化。

使用正確的屬性

不是所有CSS 屬性都適合做動畫。有些屬性在變化時會頻繁觸發(fā)佈局或繪製操作，導(dǎo)致卡頓。比如width 、 height改變可能會引起重排（reflow），而opacity和transform則幾乎只涉及合成器層面的操作，性能更好。

推薦優(yōu)先使用的屬性：

• opacity
• transform （如translate、scale、rotate）
• filter （部分瀏覽器支持較好）

如果你非要動layout 相關(guān)的屬性，最好控制頻率和範(fàn)圍，或者考慮用will-change或translateZ提前告訴瀏覽器這個元素可能會動。

控製過渡時間和函數(shù)

默認(rèn)的ease函數(shù)其實(shí)已經(jīng)不錯了，但很多時候我們還是需要根據(jù)具體效果調(diào)整時間曲線，讓動畫看起來更自然。

一些常見建議：

• 快進(jìn)慢出： cubic-bezier(0.25, 0.1, 0.25, 1) （這是默認(rèn)值）
• 簡潔快速： ease-in-out或cubic-bezier(0.4, 0, 0.2, 1)
• 更具彈性的可以試試cubic-bezier(0.68, -0.55, 0.27, 1.55)

時間方面，一般建議在0.2s ~ 0.5s之間，太短沒感覺，太長又拖沓。當(dāng)然，複雜動效可能需要組合不同持續(xù)時間來製造節(jié)奏感。

避免強(qiáng)制同步佈局和頻繁重繪

一個常見的問題是，我們在JS 中頻繁修改樣式，導(dǎo)致瀏覽器不斷重新計(jì)算佈局。例如：

 element.style.left = '10px';
console.log(element.offsetTop); // 強(qiáng)制同步佈局！
element.style.left = '20px';

這會導(dǎo)致“l(fā)ayout thrashing”，嚴(yán)重拖慢頁面。如果要做複雜的動畫，最好使用requestAnimationFrame或者乾脆交給CSS 來處理。

另外，盡量避免在動畫中修改會引起重繪的屬性，比如box-shadow或border-radius ，除非你確定性能沒問題。

合理使用硬件加速

現(xiàn)代瀏覽器會對某些CSS 操作自動啟用GPU 加速，比如transform和opacity 。但我們也可以通過一些技巧主動觸發(fā)：

• 給元素加上transform: translateZ(0)或will-change: transform
• 對移動端特別有用，因?yàn)镚PU 在移動設(shè)備上表現(xiàn)更佳

不過別濫用will-change ，它會佔(zhàn)用額外內(nèi)存，而且不是萬能加速器。只有當(dāng)你明確知道某個元素即將頻繁變化時才使用。

基本上就這些。 CSS 動畫不復(fù)雜，但細(xì)節(jié)多，稍有不慎就卡頓。關(guān)鍵是選對屬性、控制節(jié)奏、減少重排重繪，剩下的就是多調(diào)試看看流暢度。

以上是創(chuàng)建光滑的CSS過渡和動畫的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！