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