1. 先搞清楚CSS3動(dòng)畫的四大家族做前端這行繞不開一個(gè)判斷——CSS3動(dòng)畫到底應(yīng)該怎么學(xué)。很多同行一上來就背屬性列表transition、transform、animation全記住真到做項(xiàng)目的時(shí)候照樣抓瞎。我自己的體會(huì)是CSS3動(dòng)畫這套東西本質(zhì)上是四個(gè)互相獨(dú)立又經(jīng)常配合使用的機(jī)制過渡、變換、關(guān)鍵幀動(dòng)畫和緩動(dòng)函數(shù)。把這四樣?xùn)|西的職責(zé)邊界搞清楚比死記一百個(gè)屬性要有用得多。CSS3動(dòng)畫能解決什么問題最直接的是讓頁(yè)面上的元素從A狀態(tài)平滑變化到B狀態(tài)或者按照你定義好的時(shí)間軸做循環(huán)播放、來回?cái)[動(dòng)、逐幀變化。它不需要引入JavaScript定時(shí)器不用自己手動(dòng)計(jì)算每一幀的位置瀏覽器自己會(huì)處理中間的插值。對(duì)于按鈕懸停、卡片浮起、頁(yè)面加載提示、圖標(biāo)抖動(dòng)這類常見動(dòng)效純CSS方案又輕又穩(wěn)而且不會(huì)阻塞主線程。這篇文章適合什么人來讀剛接觸CSS3動(dòng)畫、準(zhǔn)備系統(tǒng)整理知識(shí)體系的新人可以做一次完整掃盲寫過一點(diǎn)動(dòng)畫但總在瀏覽器里踩坑的初級(jí)前端可以針對(duì)“為什么動(dòng)畫不生效”“為什么老是卡”這類問題做一次排查就算你已經(jīng)寫過不少動(dòng)畫效果我也建議你重點(diǎn)看第2章的緩動(dòng)曲線分析和第4章的性能調(diào)優(yōu)部分這兩個(gè)地方藏著常規(guī)文檔里根本不會(huì)寫的細(xì)節(jié)我自己也是在反復(fù)踩坑之后才摸清楚的。1.1 transition最簡(jiǎn)單的過渡動(dòng)畫transition要解決的事情非常單純當(dāng)一個(gè)元素的某個(gè)CSS屬性發(fā)生改變時(shí)不要瞬間跳到新值而是中間補(bǔ)上過渡過程。比如鼠標(biāo)懸停時(shí)背景色從白變藍(lán)按鈕大小從100%變到105%這種變化如果要自己寫JS做得用requestAnimationFrame逐幀算百分比現(xiàn)在只需要兩行CSS就能搞定.button { transition: background-color 0.3s ease; } .button:hover { background-color: #1890ff; }這里背后的原理值得多說一句transition本身并不主動(dòng)改變?nèi)魏螛邮?。它只是定義了一個(gè)“當(dāng)樣式發(fā)生變化時(shí)用什么樣的節(jié)奏去呈現(xiàn)這個(gè)過程”。瀏覽器會(huì)讀取變化前后的兩個(gè)屬性值然后按你給定的時(shí)長(zhǎng)和緩動(dòng)函數(shù)在兩者之間自動(dòng)插值。注意不是所有屬性都能做過渡只有能被“數(shù)值化”的屬性才能插值。比如color可以從rgb各通道的數(shù)值變化transform的矩陣可以做插值但display從none到block這種就沒有中間態(tài)只能瞬間切換。這就是為什么很多人想給元素做“先顯示出來再淡入”效果直接在transition里寫display會(huì)失效得用opacity加visibility的組合方案。transition還有幾個(gè)參數(shù)可以控制duration是時(shí)長(zhǎng)delay是延遲啟動(dòng)時(shí)間timing-function是緩動(dòng)函數(shù)transition-property可以限定哪些屬性參與過渡。實(shí)際開發(fā)里我強(qiáng)烈建議用transition-property把參與過渡的屬性列清楚而不是寫一個(gè)all。原因很簡(jiǎn)單all會(huì)讓所有可過渡屬性都參與動(dòng)畫有時(shí)候元素的位置、尺寸、顏色同時(shí)在變視覺上非常亂而且性能損耗也比限定屬性要大。1.2 transform讓元素動(dòng)起來的變換基礎(chǔ)transform的直譯是“變換”它負(fù)責(zé)對(duì)元素進(jìn)行平移、旋轉(zhuǎn)、縮放、傾斜這些幾何操作。注意它本身不產(chǎn)生動(dòng)畫它的價(jià)值在于配合transition或animation使用時(shí)transform的變化過程可以被插值從而形成平滑的位移、翻轉(zhuǎn)、縮放效果。transform最常用的幾個(gè)函數(shù)transform: translateX(50px); /* 沿X軸平移 */ transform: translateY(-20px); /* 沿Y軸平移 */ transform: translate(10px, 20px); /* 同時(shí)位移 */ transform: rotate(45deg); /* 旋轉(zhuǎn) */ transform: scale(1.2); /* 縮放 */ transform: skew(10deg); /* 傾斜 */ transform-origin: center top; /* 變換原點(diǎn) */有幾個(gè)坑是需要重點(diǎn)說的。第一個(gè)坑transform的組合順序會(huì)影響最終結(jié)果。CSS里同一個(gè)元素的多個(gè)變換函數(shù)是“從右往左”依次作用的看起來像數(shù)學(xué)里的復(fù)合函數(shù)。translate和rotate的順序不同最終效果完全不同。比如“先旋轉(zhuǎn)再平移”和“先平移再旋轉(zhuǎn)”前者元素會(huì)沿著旋轉(zhuǎn)后的方向軸平移后者沿著原始方向平移。想實(shí)現(xiàn)一個(gè)繞中心旋轉(zhuǎn)同時(shí)向外飄出的效果必須清楚你需要的坐標(biāo)系是哪個(gè)。第二個(gè)坑transform-origin的默認(rèn)值是元素的中心點(diǎn)rotate的繞點(diǎn)也是這個(gè)中心。但如果你想讓一個(gè)元素繞著左上角旋轉(zhuǎn)必須顯式設(shè)置transform-origin: left top。很多人做loading轉(zhuǎn)圈動(dòng)畫發(fā)現(xiàn)元素不在原地轉(zhuǎn)而是在畫圓多半就是這個(gè)問題。第三個(gè)坑scale會(huì)連帶影響子元素的視覺尺寸和布局占位。它只是視覺縮放不會(huì)改變?cè)卦诓季种械膶?shí)際尺寸flex布局計(jì)算寬度時(shí)用的還是原始值。如果你需要“真正的尺寸變化”應(yīng)該改width/height如果只是視覺效果用transform更合適因?yàn)楹笳卟挥|發(fā)重排。1.3 animation與keyframes真正的關(guān)鍵幀動(dòng)畫transition只能處理“起始狀態(tài)到結(jié)束狀態(tài)”兩點(diǎn)之間的過渡遇到需要中間過程——比如一個(gè)元素先向左滑、再?gòu)椈?、再向右跳過渡就無能為力了。這時(shí)候需要用animation配合keyframes。keyframes定義的是關(guān)鍵幀。你可以用百分比或from/to關(guān)鍵字來聲明多個(gè)時(shí)間節(jié)點(diǎn)上的狀態(tài)keyframes bounce { 0% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } 80% { transform: translateY(-5px); } 100% { transform: translateY(0); } } .icon { animation: bounce 1s ease-in-out infinite; }animation的完整寫法包含很多子屬性animation-name對(duì)應(yīng)keyframes的名稱animation-duration是時(shí)長(zhǎng)animation-timing-function是緩動(dòng)animation-delay是延遲animation-iteration-count是播放次數(shù)animation-direction是播放方向normal/reverse/alternateanimation-fill-mode決定動(dòng)畫開始前和結(jié)束后元素的狀態(tài)。還有animation-play-state可以用來暫停動(dòng)畫配合JS在特定時(shí)機(jī)做控制。這里最容易被忽略的是animation-fill-mode。默認(rèn)情況下動(dòng)畫執(zhí)行完畢后會(huì)回到動(dòng)畫前元素自身的樣式。這意味著如果你想讓動(dòng)畫停止在最后一幀必須設(shè)置fill-mode: forwards。反過來如果你想讓動(dòng)畫在開始之前就處于第一幀的狀態(tài)比如延遲期間就提前定位好得用backwards。同時(shí)需要時(shí)用both。這個(gè)細(xì)節(jié)我見過太多人栽在上面——寫了一個(gè)slideIn動(dòng)畫頁(yè)面加載后元素明明應(yīng)該從右邊滑入結(jié)果一進(jìn)來先看到元素閃在原始位置延遲結(jié)束后才開始動(dòng)本質(zhì)就是fill-mode沒設(shè)置。1.4 什么時(shí)候選什么方案選型背后的邏輯講完四樣基礎(chǔ)機(jī)制最實(shí)際的問題是動(dòng)手的時(shí)候該用哪個(gè)我的判斷標(biāo)準(zhǔn)很簡(jiǎn)單如果只有兩層狀態(tài)切換正常態(tài)到懸停態(tài)、展開態(tài)到收起態(tài)用transition。它最輕代碼最少性能最好。如果狀態(tài)切換涉及多個(gè)中間階段、需要循環(huán)播放、或者有明確的幀節(jié)奏用animationkeyframes。transform本身不單獨(dú)用它幾乎總是作為上述兩者的“作戰(zhàn)內(nèi)容”出現(xiàn)——過渡過渡的是transform的變化動(dòng)畫動(dòng)畫的是transform的變化。如果需要操縱動(dòng)畫的播放進(jìn)度比如滾動(dòng)驅(qū)動(dòng)進(jìn)度條、拖拽控制展開純CSS搞不定必須配合JS去讀動(dòng)畫狀態(tài)或者用Web Animations API。這時(shí)候我建議直接用Web Animations APIelement.animate()它的語(yǔ)法和CSS的animation高度一致學(xué)習(xí)成本低還能用JS精確控制playbackRate和currentTime。用生活化類比來說transition像電梯從A層到B層按下按鈕它會(huì)勻速或按既定節(jié)奏運(yùn)行animation像演唱會(huì)燈光控制臺(tái)你可以編排每個(gè)時(shí)間點(diǎn)的燈位、顏色、頻閃循環(huán)播放隨時(shí)切換模式transform是舞臺(tái)上的演員你告訴它怎么走位、怎么轉(zhuǎn)體緩動(dòng)函數(shù)是導(dǎo)演給演員設(shè)定的“表演節(jié)奏”——是勻速走、加速跑、還是先快后慢帶著余韻。2. 核心參數(shù)和細(xì)節(jié)解析這一章我把動(dòng)畫里面的硬核參數(shù)單獨(dú)拎出來講。這些參數(shù)每個(gè)都能單獨(dú)寫一篇文章但在實(shí)際項(xiàng)目里它們往往是“組合拳”的關(guān)系。理解它們之間的互相影響比單個(gè)記住定義重要得多。2.1 緩動(dòng)函數(shù)動(dòng)畫的靈魂很多人做動(dòng)畫做出來“生硬”不是動(dòng)作設(shè)計(jì)問題而是緩動(dòng)函數(shù)用錯(cuò)了。緩動(dòng)函數(shù)解決的是在動(dòng)畫時(shí)長(zhǎng)內(nèi)值的變化速率是怎么分布的。線性linear就是勻速?gòu)拈_始到結(jié)束一個(gè)速度ease是慢開始、中間加速、末尾收緩ease-in是慢速起步、逐漸加速ease-out是快速起步、逐漸減速。但你以為緩動(dòng)函數(shù)就是這幾個(gè)預(yù)設(shè)值嗎遠(yuǎn)遠(yuǎn)不止。CSS還給了一個(gè)特別強(qiáng)大的工具——cubic-bezier函數(shù)。任何一個(gè)緩動(dòng)曲線在數(shù)學(xué)上都可以用一條三次貝塞爾曲線來表示。你可以通過控制兩個(gè)控制點(diǎn)的坐標(biāo)制造出非常細(xì)膩的節(jié)奏變化。transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);上面這個(gè)例子里的控制點(diǎn)第二個(gè)值是個(gè)負(fù)數(shù)這意味著曲線開頭會(huì)先朝著反方向沖一下然后再朝目標(biāo)方向推進(jìn)。表現(xiàn)出來的效果就是元素會(huì)先往目標(biāo)方向的反方向“壓縮”一下再?gòu)棾龅侥繕?biāo)位置非常有彈性。我自己做動(dòng)畫時(shí)幾乎不用預(yù)設(shè)的ease而是根據(jù)效果調(diào)cubic-bezier。比如做彈跳、反彈效果控制點(diǎn)就會(huì)超過[0,1]的范圍做平滑進(jìn)場(chǎng)用[0.25, 0.1, 0.25, 1]這種典型曲線。調(diào)試方法也很簡(jiǎn)單瀏覽器DevTools里直接打開動(dòng)畫調(diào)試面板實(shí)時(shí)拖拽貝塞爾控制點(diǎn)肉眼對(duì)比效果比自己盲寫參數(shù)高效太多。還有一點(diǎn)需要提醒duration設(shè)置很短比如0.2s以下的時(shí)候緩動(dòng)差異幾乎看不出來設(shè)置很長(zhǎng)比如2s以上的時(shí)候緩動(dòng)差異會(huì)被放大得非常明顯。所以做大型頁(yè)面動(dòng)效時(shí)建議把動(dòng)畫時(shí)長(zhǎng)統(tǒng)一規(guī)劃建立一套設(shè)計(jì)規(guī)范比如進(jìn)場(chǎng)動(dòng)畫一律0.3s ease-out離場(chǎng)動(dòng)畫一律0.2s ease-in循環(huán)動(dòng)畫根據(jù)振幅調(diào)整時(shí)長(zhǎng)避免每處效果節(jié)奏都不一致。2.2 transform的組合順序與坐標(biāo)系transform的組合順序問題我前面提過一次這里必須深挖。因?yàn)樗皇强克烙浻脖尘湍苷莆盏乃简?yàn)的是你腦子里的“坐標(biāo)空間想象能力”。CSS的transform本質(zhì)上是矩陣運(yùn)算。元素最終呈現(xiàn)在頁(yè)面上的位置是多個(gè)矩陣按順序相乘的結(jié)果。關(guān)鍵點(diǎn)是CSS里從左到右寫的多個(gè)變換實(shí)際作用順序是從右邊的函數(shù)開始的。所以寫transform: translateX(50px) rotate(45deg)的時(shí)候元素先被旋轉(zhuǎn)了45度再沿著旋轉(zhuǎn)后的X軸方向平移50px寫transform: rotate(45deg) translateX(50px)則是先沿著原始X軸平移50px再整體旋轉(zhuǎn)45度。最終兩個(gè)結(jié)果在頁(yè)面上呈現(xiàn)的位置完全不同。在實(shí)際場(chǎng)景里這個(gè)細(xì)節(jié)最常出現(xiàn)在引線、氣泡、陀螺儀交互這類需要“沿著元素自身方向移動(dòng)”的效果中。舉個(gè)例子做一個(gè)跟隨鼠標(biāo)旋轉(zhuǎn)的指針指針本體是一個(gè)箭頭圖標(biāo)希望它始終指向鼠標(biāo)位置同時(shí)還希望指針頭部在旋轉(zhuǎn)到右邊時(shí)能向前伸出一點(diǎn)。這時(shí)候如果先rotate再translate伸出的方向就會(huì)跟隨指針自身方向視覺上正確反過來先translate再rotate會(huì)看到指針繞著一個(gè)圓圈亂跳。我建議新手把這個(gè)當(dāng)成一道空間推理題來練閉上眼睛想象一個(gè)矩形先向右平移再繞中心旋轉(zhuǎn)45度觀察最終位置換過來先繞中心旋轉(zhuǎn)再向右平移再看最終位置。想明白兩個(gè)結(jié)果的差異就算過關(guān)了。另一個(gè)輔助技巧是給元素加一個(gè)臨時(shí)的高亮底色和輪廓線把變換拆開逐步觀察借助DevTools的transform樣式實(shí)時(shí)預(yù)覽功能效果非常直觀。2.3 animation的循環(huán)與填充模式動(dòng)畫不是播放一次就完事。很多實(shí)際場(chǎng)景需要循環(huán)、來回、暫停這些一次性播放搞不定。循環(huán)播放用的是animation-iteration-count可以寫數(shù)字3表示播放3次也可以寫infinite表示無限循環(huán)。來回播放用animation-direction: alternate第一次從0%到100%第二次從100%倒回0%以此類推。alternate配合infinite是很多“呼吸感”動(dòng)畫的標(biāo)配比如加載提示的呼吸圓圈、提示氣泡的上下浮動(dòng)都不需要寫復(fù)雜的keyframes利用alternate的往返機(jī)制就能輕松實(shí)現(xiàn)。填充模式我前面已經(jīng)強(qiáng)調(diào)過了這里再展開說。animation-fill-mode: forwards讓動(dòng)畫結(jié)束后的樣式停留在最后一幀backwards讓元素在動(dòng)畫開始前就應(yīng)用第一幀樣式尤其是配合animation-delay使用時(shí)特別重要——延遲的這段時(shí)間里元素其實(shí)還沒開始動(dòng)如果不用backwards元素先以自己本來的狀態(tài)待著等你設(shè)定好的延遲結(jié)束后“啪”一下跳到第一幀觀感非常突兀both則是兩種需求同時(shí)滿足。這里有一個(gè)容易被忽視的坑fill-mode: forwards雖然讓元素停在最后一幀但這一“停留”并不是元素的實(shí)際樣式。元素仍處于“動(dòng)畫正在執(zhí)行”的Closure狀態(tài)你在CSS里設(shè)置的width、transform等靜態(tài)值對(duì)它暫時(shí)失效。所以如果你需要在動(dòng)畫結(jié)束后繼續(xù)和元素交互比如動(dòng)畫結(jié)束后再次觸發(fā)另一段動(dòng)畫有時(shí)候會(huì)遇到樣式不生效的困惑原因就是fill-mode強(qiáng)制覆蓋了靜態(tài)樣式。解決方案是把動(dòng)畫最終的樣式同時(shí)寫到元素的靜態(tài)樣式表里讓靜態(tài)樣式與最后一幀保持一致再配合fill-mode使用這樣可以避免邊界狀態(tài)混亂。2.4 硬件加速與合成層寫CSS3動(dòng)畫繞不開性能問題而性能問題的核心在“合成層”。這里簡(jiǎn)單解釋一下渲染流程。瀏覽器渲染一個(gè)頁(yè)面大體經(jīng)過解析HTML/CSS、構(gòu)建渲染樹、計(jì)算布局Layout、繪制Paint、合成Composite。傳統(tǒng)做法里改變width、height、left、top這些屬性時(shí)瀏覽器需要重新計(jì)算布局從Layout開始往下全部重跑代價(jià)非常高。而transform和opacity的變化瀏覽器可以只把元素提升到一個(gè)獨(dú)立的合成層然后由GPU去做層合成不需要重新計(jì)算布局和大部分繪制工作性能會(huì)好很多。所以在動(dòng)畫里有一條黃金準(zhǔn)則能不改布局就不改布局盡量用transform代替left/top用opacity代替display/visibility。做位移效果優(yōu)先translate做顯隱用opacity加visibility做縮放用scale不要?jiǎng)觲idth/height。will-change屬性可以主動(dòng)告訴瀏覽器某個(gè)元素即將發(fā)生變化讓瀏覽器提前把它提升到合成層.card { will-change: transform, opacity; }不過will-change也不是濫用無害的。每個(gè)合成層都會(huì)占用GPU內(nèi)存如果一個(gè)頁(yè)面上幾十個(gè)元素全加上will-change內(nèi)存直接吃滿反而卡到不行。我自己的經(jīng)驗(yàn)是只給數(shù)量少且高頻變化的元素添加will-change例如每屏最多一兩個(gè)持續(xù)動(dòng)畫的元素對(duì)hover動(dòng)畫、一次性進(jìn)場(chǎng)動(dòng)畫根本不需要加瀏覽器自己優(yōu)化起來已經(jīng)很快了。另外還要注意will-change不要長(zhǎng)期掛在元素上動(dòng)畫結(jié)束后應(yīng)該移除否則內(nèi)存一直占著移動(dòng)端尤其明顯。3. 完整實(shí)操?gòu)男枨蟮铰涞氐娜鞒碳夹g(shù)點(diǎn)講了這么多我們來做一個(gè)完整的實(shí)戰(zhàn)項(xiàng)目。假設(shè)需求是這樣的一個(gè)活動(dòng)頁(yè)面的加載完成后需要呈現(xiàn)一組卡片依次飛入的效果?？ㄆ瑑?nèi)容有圖標(biāo)、標(biāo)題、描述入場(chǎng)時(shí)整體向右滑入并帶一點(diǎn)透明度漸變同時(shí)卡片之間有120ms的時(shí)間差。鼠標(biāo)懸停在卡片上時(shí)卡片輕微上浮并增加陰影。這個(gè)效果涵蓋了transition、animation、transform、keyframes這么多基礎(chǔ)機(jī)制是一個(gè)非常好的綜合練習(xí)。3.1 需求拆解與動(dòng)畫規(guī)劃動(dòng)手寫代碼之前我先做動(dòng)畫規(guī)劃。飛入效果有4張卡片每張卡片有入場(chǎng)動(dòng)畫需要依次播放所以本質(zhì)上需要控制動(dòng)畫延遲?？梢杂胊nimation-delay來實(shí)現(xiàn)但如果簡(jiǎn)單地在每張卡片上寫死delay需要手算每個(gè)延遲值。更優(yōu)雅的做法是利用CSS的nth-child選中卡片再配合CSS變量傳入延遲值。這里有一個(gè)非常實(shí)用的小技巧在HTML中為每個(gè)卡片元素設(shè)置style--delay: 0.1s這種自定義屬性再用animation-delay: var(--delay)去讀取這樣延遲控制就完全從CSS邏輯里解耦出來需要調(diào)整時(shí)只改HTML里對(duì)應(yīng)的變量值非常方便。入場(chǎng)動(dòng)畫的keyframes就設(shè)計(jì)為從視覺外位置向右偏移60px和透明狀態(tài)開始到最終位置和完全不透明結(jié)束。注意入場(chǎng)動(dòng)畫完成后要停在最后一幀所以fill-mode用forwards。同時(shí)為了避免入場(chǎng)動(dòng)畫把最后狀態(tài)鎖死卡片的靜態(tài)樣式里也要把最終位置和透明度寫成默認(rèn)狀態(tài)這樣動(dòng)畫結(jié)束后不會(huì)出現(xiàn)殘留問題。懸停上浮效果屬于狀態(tài)切換用transition處理最合適。transform的位移變化配合box-shadow的變化視覺上形成一種“卡片被輕輕托起”的感覺。上浮幅度我控制在-6px陰影從淺到深整體過渡0.25s用ease-out這樣松開鼠標(biāo)回彈時(shí)也有自然的減速。3.2 核心代碼實(shí)現(xiàn)把上一步的規(guī)劃落成實(shí)際代碼。HTML結(jié)構(gòu)四張卡片每張帶自定義屬性控制延遲div classcard-list div classcard style--delay: 0s.../div div classcard style--delay: 0.12s.../div div classcard style--delay: 0.24s.../div div classcard style--delay: 0.36s.../div /divCSS部分.card-list { display: flex; gap: 20px; } .card { /* 靜態(tài)默認(rèn)樣式就是動(dòng)畫最終狀態(tài) */ transform: translateX(0) scale(1); opacity: 1; transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* 入場(chǎng)動(dòng)畫 */ .card { animation: cardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--delay); } keyframes cardIn { 0% { opacity: 0; transform: translateX(60px); } 100% { opacity: 1; transform: translateX(0); } } /* 懸停上浮 */ .card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); }這里要注意一個(gè)沖突入場(chǎng)動(dòng)畫結(jié)束后元素狀態(tài)被fill-mode: both鎖在100%關(guān)鍵幀的transform: translateX(0)。此時(shí)hover的transform修改可能不會(huì)生效因?yàn)閯?dòng)畫的優(yōu)先級(jí)比普通樣式高。解決方法是在動(dòng)畫結(jié)束后用animation-play-state暫停或者干脆移除動(dòng)畫——最穩(wěn)妥的方案是讓入場(chǎng)動(dòng)畫只執(zhí)行一次然后通過 animationend 事件配合JS給卡片加一個(gè)類名把a(bǔ)nimation從元素上移除?；蛘吒?jiǎn)單的做法入場(chǎng)動(dòng)畫的100%關(guān)鍵幀不要設(shè)置transform讓它在默認(rèn)樣式上結(jié)束同時(shí)將fill-mode設(shè)為backwards保證延遲期間有初始狀態(tài)動(dòng)畫結(jié)束回到默認(rèn)狀態(tài)這時(shí)hover的transform就不會(huì)被動(dòng)畫覆蓋。這里我把方案調(diào)整得更可靠.card { opacity: 0; /* 靜態(tài)默認(rèn)就是入場(chǎng)前狀態(tài)避免閃爍 */ animation: cardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: var(--delay); } keyframes cardIn { 0% { opacity: 0; transform: translateX(60px); } 100% { opacity: 1; transform: translateX(0); } }動(dòng)畫結(jié)束后由于沒有fill-mode: forwards元素回到靜態(tài)樣式。但靜態(tài)樣式的opacity是0會(huì)直接消失。所以配合動(dòng)畫結(jié)束事件來清理document.querySelectorAll(.card).forEach((card) { card.addEventListener(animationend, () { card.style.opacity 1; card.style.transform translateX(0); card.style.animation none; }); });這樣既保證了入場(chǎng)動(dòng)畫的延遲表現(xiàn)又讓動(dòng)畫結(jié)束后元素還原為純靜態(tài)狀態(tài)hover的transition得以正常生效。這個(gè)“動(dòng)畫結(jié)束后清理動(dòng)畫狀態(tài)”的小技巧在整個(gè)項(xiàng)目里都會(huì)反復(fù)用統(tǒng)一寫成一個(gè)工具函數(shù)也不復(fù)雜。3.3 動(dòng)畫細(xì)節(jié)打磨代碼跑通只是第一步真正拉開差距的是細(xì)節(jié)打磨。第一個(gè)細(xì)節(jié)是緩動(dòng)曲線。我用cubic-bezier(0.22, 1, 0.36, 1)代替默認(rèn)ease這是一條“ease-out的加強(qiáng)版”起步快、收尾慢、視覺上很利落不會(huì)有拖泥帶水的感覺?？ㄆw入用這個(gè)曲線懸停上浮用ease-out兩個(gè)方向都要順滑。第二個(gè)細(xì)節(jié)是層級(jí)和遮擋問題。上浮的卡片要保證在視覺上壓在相鄰卡片上面需要給hover狀態(tài)的卡片加position: relative和z-index提升。否則兩張卡片重疊時(shí)浮動(dòng)卡片可能被后面的卡片擋住陰影效果很出戲。第三個(gè)細(xì)節(jié)是尊重系統(tǒng)偏好。越來越多的用戶開啟了系統(tǒng)級(jí)“減少動(dòng)態(tài)效果”模式。作為前端應(yīng)該主動(dòng)用prefers-reduced-motion媒體查詢判斷如果用戶偏好減少動(dòng)效就把所有動(dòng)畫時(shí)長(zhǎng)縮到極短或直接關(guān)閉media (prefers-reduced-motion: reduce) { .card { animation: none; transition: none; } }這個(gè)細(xì)節(jié)不一定會(huì)被視覺同學(xué)提出來但真正上線面對(duì)真實(shí)用戶時(shí)體驗(yàn)差距非常明顯。我自己接過的幾個(gè)大型項(xiàng)目里都會(huì)在全局CSS里放上這樣一套兜底策略成本極低收益卻是實(shí)打?qū)嵉目稍L問性提升。第四個(gè)細(xì)節(jié)是動(dòng)畫與數(shù)據(jù)加載的配合。如果卡片數(shù)據(jù)是通過接口異步獲取的入場(chǎng)動(dòng)畫應(yīng)該在數(shù)據(jù)渲染完成后觸發(fā)。我的做法是先讓容器處于不可見狀態(tài)等數(shù)據(jù)渲染完成后再加一個(gè)類名觸發(fā)動(dòng)畫?；蛘吆?jiǎn)單一點(diǎn)用requestAnimationFrame在DOM更新后延遲幾毫秒再添加動(dòng)畫類名避免數(shù)據(jù)加載太快時(shí)動(dòng)畫一閃而過看不到。這些都是真實(shí)項(xiàng)目中“動(dòng)畫能不能按設(shè)計(jì)意圖播放”的隱形關(guān)鍵點(diǎn)。4. 場(chǎng)景進(jìn)階與擴(kuò)展實(shí)現(xiàn)基礎(chǔ)入場(chǎng)動(dòng)畫做完了這一章把場(chǎng)景復(fù)雜度拉高講兩個(gè)真正考驗(yàn)功底的擴(kuò)展方向滾動(dòng)驅(qū)動(dòng)動(dòng)畫和拖拽交互中的動(dòng)畫控制。這兩個(gè)方向需要CSS和JavaScript配合但基礎(chǔ)仍然是CSS3動(dòng)畫的那套核心機(jī)制。4.1 滾動(dòng)驅(qū)動(dòng)的入場(chǎng)動(dòng)畫頁(yè)面很長(zhǎng)時(shí)用戶往下滾動(dòng)元素進(jìn)入視口應(yīng)該有一個(gè)進(jìn)場(chǎng)動(dòng)畫。這個(gè)效果很多庫(kù)都能實(shí)現(xiàn)但用純CSS加少量IntersectionObserver也能寫得非常優(yōu)雅。思路是這樣的用一個(gè)容器元素默認(rèn)把子元素的opacity設(shè)為0、加一點(diǎn)translateY偏移當(dāng)容器進(jìn)入視口時(shí)通過IntersectionObserver判定給容器加一個(gè)類名類名觸發(fā)子元素的animation播放。這里每個(gè)子元素依然可以用nth-child或自定義CSS變量做延遲形成瀑布式的進(jìn)場(chǎng)序列。const io new IntersectionObserver((entries) { entries.forEach((entry) { if (entry.isIntersecting) { entry.target.classList.add(in-view); io.unobserve(entry.target); } }); }); document.querySelectorAll(.scroll-section).forEach((section) { io.observe(section); });.scroll-section .item { opacity: 0; transform: translateY(40px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .scroll-section.in-view .item { opacity: 1; transform: translateY(0); }這里注意一個(gè)細(xì)節(jié)進(jìn)場(chǎng)動(dòng)畫用transition而不是animation理由很簡(jiǎn)單——transition由類名切換觸發(fā)狀態(tài)回流是自動(dòng)的就算用戶滾動(dòng)得非?？鞂?dǎo)致元素又離開視口反向過渡也是平滑的如果用animation就必須處理fill-mode和類名移除的時(shí)序復(fù)雜不少。IntersectionObserver的rootMargin參數(shù)可以微調(diào)觸發(fā)時(shí)機(jī)。我個(gè)人經(jīng)驗(yàn)是把rootMargin設(shè)為0px 0px -10% 0px也就是說元素進(jìn)入視口且越過底部10%的位置時(shí)才觸發(fā)避免用戶剛看到一點(diǎn)邊緣就動(dòng)畫全跑了。4.2 拖拽交互與動(dòng)畫反饋拖拽是另一個(gè)常見場(chǎng)景。拖拽元素跟隨鼠標(biāo)移動(dòng)如果直接用mousemove設(shè)置left和top會(huì)頻繁觸發(fā)布局計(jì)算尤其在低端設(shè)備上會(huì)明顯掉幀。正確做法是在拖拽開始前給元素設(shè)置will-change: transform在mousemove中修改transform的值而不是left/top。let startX, startY, startLeft, startTop; element.addEventListener(mousedown, (e) { element.style.willChange transform; startX e.clientX; startY e.clientY; const rect element.getBoundingClientRect(); startLeft rect.left; startTop rect.top; document.addEventListener(mousemove, onMove); document.addEventListener(mouseup, onUp); }); function onMove(e) { const dx e.clientX - startX; const dy e.clientY - startY; element.style.transform translate(${startLeft dx}px, ${startTop dy}px); }這里最核心的思路是把元素當(dāng)前的位置用transform表達(dá)而不是用left/top。這樣拖拽過程中瀏覽器只需要做合成層更新不觸發(fā)重排。加上will-change之后拖拽的流暢度會(huì)有一個(gè)質(zhì)的提升。拖拽結(jié)束釋放時(shí)如果希望卡片回彈到原位可以動(dòng)態(tài)寫入transform的過渡效果function onUp() { element.style.transition transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); element.style.transform translate(0, 0); element.addEventListener(transitionend, () { element.style.transition none; element.style.willChange auto; }); }拖拽到一半松手回彈這個(gè)交互在很多投票、收藏、滑動(dòng)刪除的組件里都會(huì)用到。關(guān)鍵點(diǎn)在回彈時(shí)臨時(shí)添加transition回彈結(jié)束后馬上移除否則下次拖拽會(huì)因?yàn)閠ransition的存在變得“黏黏”的不跟手。4.3 利用CSS自定義屬性做動(dòng)態(tài)動(dòng)畫CSS自定義屬性CSS Variables跟動(dòng)畫組合起來能力邊界又?jǐn)U大一圈。你可以用自定義屬性存儲(chǔ)動(dòng)畫參數(shù)位移距離、旋轉(zhuǎn)角度、顏色值在JS里直接修改自定義屬性值而動(dòng)畫本身完全由CSS驅(qū)動(dòng)。舉個(gè)例子做一個(gè)跟隨鼠標(biāo)移動(dòng)的光暈效果光暈中心點(diǎn)根據(jù)鼠標(biāo)位置變化。把鼠標(biāo)坐標(biāo)寫入CSS自定義屬性--mx和--my動(dòng)畫中的背景徑向漸變讀取這兩個(gè)值.glow { background: radial-gradient( circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.8), transparent 60% ); transition: background 0.2s ease-out; }鼠標(biāo)移動(dòng)時(shí)更新自定義屬性container.addEventListener(mousemove, (e) { const rect container.getBoundingClientRect(); container.style.setProperty(--mx, ${e.clientX - rect.left}px); container.style.setProperty(--my, ${e.clientY - rect.top}px); });這種寫法的好處是動(dòng)畫邏輯完全留在CSS層JavaScript只負(fù)責(zé)提供數(shù)據(jù)源。代碼可維護(hù)性比逐幀操作樣式高不少而且天然受到CSS過渡機(jī)制的保護(hù)所有變化都是平滑插值的。5. 常見問題與性能調(diào)優(yōu)實(shí)錄最后這一部分我把項(xiàng)目迭代中反復(fù)遇到的高頻問題整理成一份速查表。每個(gè)問題都是我或者身邊同事真實(shí)踩過坑后總結(jié)出來的希望能幫讀者省掉調(diào)試時(shí)間。5.1 動(dòng)畫不生效的排查思路動(dòng)畫沒反應(yīng)先別急著懷疑瀏覽器有bug。90%的情況是下面幾個(gè)原因。transform拼寫錯(cuò)誤或?qū)傩皂樞騿栴}。CSS里寫transform: rotate(45deg) translateX(50px)和translateX(50px) rotate(45deg)看起來差不多實(shí)際效果完全不同。如果你發(fā)現(xiàn)元素繞著一個(gè)奇怪的點(diǎn)轉(zhuǎn)或者位移方向不對(duì)先檢查順序。關(guān)鍵幀名稱寫錯(cuò)。keyframes的命名在后面加引號(hào)或不加引號(hào)時(shí)規(guī)則略有不同但最關(guān)鍵的是animation-name必須和keyframes后面緊跟的名稱完全一致。這個(gè)錯(cuò)別字很難查因?yàn)闉g覽器不報(bào)錯(cuò)只是靜默不執(zhí)行。display:none到display:block的切換。很多人在動(dòng)畫前把元素隱藏等條件滿足后再顯示結(jié)果display從none切到block時(shí)動(dòng)畫無法對(duì)“從無到有”做插值。解決方案是先把元素渲染出來只是用opacity:0加visibility:hidden讓它不可見需要顯示的時(shí)候過渡到可見狀態(tài)。或者參考第1章里面的做法用animation的fill-mode配合處理。屬性值類型不匹配。比如從auto過渡到一個(gè)具體像素值瀏覽器不知道auto的中間值是什么過渡會(huì)直接跳到終點(diǎn)。遇到這種問題把初值改成明確數(shù)值即可。元素是內(nèi)聯(lián)元素。transform對(duì)非塊級(jí)元素比如原生的span不生效或者表現(xiàn)詭異因?yàn)閠ransform依賴元素的盒模型。解決方案是給span加上display: inline-block或直接使用塊級(jí)元素。5.2 動(dòng)畫卡頓與掉幀的排查思路卡頓的排查步驟我一般按照“由簡(jiǎn)入繁”的順序來。第一步看是不是動(dòng)畫屬性用錯(cuò)了。如果改變了width、height、margin、left、top這類布局屬性瀏覽器每次都要重排代價(jià)極高。換成transform和opacity之后通常立竿見影。第二步看是不是同時(shí)播放了太多動(dòng)畫。一個(gè)頁(yè)面同時(shí)存在十幾個(gè)無限循環(huán)動(dòng)畫每個(gè)都占一個(gè)合成層顯卡扛不住。對(duì)于移動(dòng)端尤其明顯建議把動(dòng)畫數(shù)量控制在5個(gè)以內(nèi)或者降低重疊播率。第三步使用DevTools的Performance面板錄制一段操作看幀率和主線程占用。如果看到大量紫色區(qū)域說明有長(zhǎng)時(shí)間的重排重繪如果看到GPU進(jìn)程占用高說明合成層過多。結(jié)合will-change的使用記錄逐個(gè)排查。第四步檢查transform有沒有觸發(fā)“層爆炸”。比如一個(gè)卡片hover時(shí)被設(shè)了will-change內(nèi)部又有子元素也設(shè)了will-change父子元素各自一組合成層整個(gè)頁(yè)面層數(shù)迅速膨脹。移動(dòng)端極易白屏或掉幀。解決方案will-change只設(shè)在最頂層的獨(dú)立動(dòng)畫元素上子元素的動(dòng)畫交給父級(jí)合成層統(tǒng)一處理。第五步看看是不是圖片太大導(dǎo)致解碼和上傳GPU紋理耗時(shí)嚴(yán)重。動(dòng)畫中涉及大尺寸圖片時(shí)尤其是在移動(dòng)端用WebP壓縮圖片、限制圖片最大顯示尺寸、預(yù)先給圖片設(shè)置好尺寸避免一邊解碼一邊動(dòng)畫。5.3 兼容性與降級(jí)策略CSS3動(dòng)畫的兼容性在現(xiàn)代瀏覽器里已經(jīng)很好了但真到線上環(huán)境還是要考慮兩種情況舊版本移動(dòng)瀏覽器、以及系統(tǒng)級(jí)關(guān)閉動(dòng)效的用戶。兼容性處理的核心思路是漸進(jìn)增強(qiáng)。CSS動(dòng)畫屬性本身不會(huì)導(dǎo)致頁(yè)面崩潰不支持的瀏覽器只是把動(dòng)畫忽略掉元素仍然顯示最終或初始狀態(tài)。所以我的策略是把元素的靜態(tài)默認(rèn)樣式寫成最終狀態(tài)內(nèi)容可讀動(dòng)畫作為增強(qiáng)層添加。萬(wàn)一瀏覽器不支持動(dòng)畫用戶看到的還是一個(gè)布局完整、內(nèi)容清晰的頁(yè)面只是沒有動(dòng)效動(dòng)畫。prefers-reduced-motion的降級(jí)處理也是這個(gè)思路。媒體查詢里把動(dòng)畫時(shí)長(zhǎng)設(shè)為0.01s或者animation: none同時(shí)保留transition的最終結(jié)果讓頁(yè)面保持可使用狀態(tài)。無障礙層面的價(jià)值前面已經(jīng)說過這里不再重復(fù)。5.4 一些容易踩的實(shí)戰(zhàn)細(xì)節(jié)坑最后整理幾條容易被忽略但特別影響體驗(yàn)的細(xì)節(jié)。第一transition和animation同時(shí)作用于同一個(gè)屬性時(shí)順序會(huì)導(dǎo)致意想不到的結(jié)果。如果元素既有transition作為狀態(tài)切換又有animation做循環(huán)動(dòng)畫后者的優(yōu)先級(jí)通常更高。寫之前想清楚誰(shuí)負(fù)責(zé)常態(tài)、誰(shuí)負(fù)責(zé)臨時(shí)態(tài)。第二animation-delay的負(fù)值。animation-delay支持負(fù)數(shù)它表示動(dòng)畫已經(jīng)執(zhí)行了一段時(shí)間。利用這個(gè)特性可以讓多個(gè)元素從動(dòng)畫的中途開始播放形成一種“錯(cuò)開但都在動(dòng)”的效果。比如三個(gè)左右搖晃的鈴鐺延遲分別設(shè)為-0.0s、-0.4s、-0.8s它們會(huì)呈現(xiàn)出完美的錯(cuò)開節(jié)奏而且所有元素永遠(yuǎn)在持續(xù)運(yùn)動(dòng)不會(huì)出現(xiàn)首尾斷裂感。第三transform-origin影響動(dòng)畫的旋轉(zhuǎn)中心。做圓形進(jìn)度條、指針時(shí)鐘、衣架掛鉤這類效果時(shí)記住先設(shè)置transform-origin否則默認(rèn)繞著中心旋轉(zhuǎn)效果完全不對(duì)。第四避免在動(dòng)畫屬性上使用復(fù)合寫法時(shí)誤覆蓋。transition: all 0.3s和transition: transform 0.3s并不是等價(jià)的——前者允許所有屬性過渡后者只允許transform。如果你既有transform過渡需求又有opacity過渡需求記得寫成transition: transform 0.3s, opacity 0.3s不要只寫其中一個(gè)否則另一個(gè)屬性的變化會(huì)瞬間跳變顯得非常突兀。第五動(dòng)畫結(jié)束事件和transitionEnd事件是真實(shí)存在的但它們的觸發(fā)條件比較苛刻如果動(dòng)畫期間元素被隱藏、display切換、或者動(dòng)畫被強(qiáng)制停止事件可能不會(huì)觸發(fā)。所以依賴這兩個(gè)事件做后續(xù)邏輯時(shí)注意加一個(gè)定時(shí)器兜底或者用Promise包一層超時(shí)邏輯。我在實(shí)際項(xiàng)目里寫過不少“動(dòng)畫完成后再把隱藏元素清理掉”的代碼如果不加超時(shí)保護(hù)偶爾會(huì)有元素永遠(yuǎn)殘留的情況。在實(shí)際使用中最讓我省心的組合是transform配合opacity做位移和顯隱transition配合類名切換做狀態(tài)變化animation只用于需要獨(dú)立節(jié)奏的循環(huán)和進(jìn)場(chǎng)效果再配合CSS自定義變量統(tǒng)一管理參數(shù)。這套方法論我用了好幾年在移動(dòng)端和桌面端都跑得穩(wěn)定。再分享一個(gè)小技巧開發(fā)時(shí)打開DevTools的Rendering面板開啟“Paint flashing”和“Layer borders”兩個(gè)選項(xiàng)能實(shí)時(shí)看到哪些區(qū)域正在被重繪、哪些元素被提升到了獨(dú)立合成層?？吹骄G色邊框逐漸變少、重繪區(qū)域不再頻繁閃爍說明你的動(dòng)畫優(yōu)化已經(jīng)到位了。