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