正確使用 transition 與 filter: blur() 可實(shí)現(xiàn)流暢模糊動(dòng)畫，需初始化 filter、避免 display: none、統(tǒng)一 filter 值，并通過硬件加速和范圍限制提升性能，適用于背景虛化等場(chǎng)景。

在使用 CSS 實(shí)現(xiàn)模糊動(dòng)畫時(shí)，transition 與 filter: blur() 結(jié)合可以創(chuàng)建平滑的視覺效果。但實(shí)際應(yīng)用中，如果不注意細(xì)節(jié)，可能會(huì)導(dǎo)致動(dòng)畫卡頓或不生效。下面介紹如何正確使用它們實(shí)現(xiàn)流暢的模糊過渡動(dòng)畫。

1. 基本語(yǔ)法與結(jié)構(gòu)

要實(shí)現(xiàn)一個(gè)元素從清晰到模糊（或反之）的過渡，需要設(shè)置 filter 屬性并配合 transition 來控制變化速度。

示例：鼠標(biāo)懸停時(shí)添加模糊效果

.box {
  filter: blur(0);
  transition: filter 0.4s ease;
}

.box:hover {
  filter: blur(10px);
}

這里將 filter 的變化加上了 0.4 秒的緩動(dòng)過渡，使模糊效果更自然。

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

2. 提升動(dòng)畫性能

filter: blur() 是一個(gè)計(jì)算量較大的屬性，直接對(duì)大面積元素做模糊過渡可能導(dǎo)致掉幀。可以通過以下方式優(yōu)化：

文心大模型

百度飛槳-文心大模型 ERNIE 3.0 文本理解與創(chuàng)作

56

查看詳情

• 啟用硬件加速：給元素添加 transform: translateZ(0) 或 will-change: filter，促使瀏覽器將其提升為獨(dú)立圖層。
• 限制模糊范圍：避免對(duì)整個(gè)頁(yè)面或大圖直接模糊，可包裹在一個(gè)容器內(nèi)并設(shè)置 overflow: hidden 控制影響區(qū)域。
• 控制過渡頻率：頻繁觸發(fā) hover 可能造成閃爍或延遲，可通過防抖思路減少觸發(fā)次數(shù)（JS 控制類名切換）。

3. 常見問題與解決方案

有時(shí)你會(huì)發(fā)現(xiàn)模糊動(dòng)畫“跳變”而不是漸進(jìn)式過渡，原因如下：

• 未初始化 filter：如果默認(rèn)狀態(tài)沒寫 filter: blur(0)，瀏覽器無法計(jì)算過渡起點(diǎn)，應(yīng)始終顯式定義起始值。
• 其他 filter 值干擾：若同時(shí)使用了 brightness、contrast 等，需統(tǒng)一寫在一行，否則會(huì)覆蓋。例如：filter: blur(0) brightness(1)。
• display: none 阻斷過渡：隱藏時(shí)用 opacity: 0 和 pointer-events: none 替代 display: none，以保持 DOM 狀態(tài)連續(xù)性。

4. 實(shí)用場(chǎng)景示例

比如做一個(gè)背景高斯模糊的彈窗：

.modal-backdrop {
  filter: blur(0);
  transition: filter 0.3s ease-in-out;
}

.modal-open .modal-backdrop {
  filter: blur(3px);
}

配合 JS 切換類名，就能實(shí)現(xiàn)背景虛化漸入效果，增強(qiáng)用戶體驗(yàn)。

基本上就這些。只要初始化得當(dāng)、注意性能優(yōu)化，CSS 的 transition 與 filter: blur() 能輕松實(shí)現(xiàn)絲滑的模糊動(dòng)畫。關(guān)鍵在于細(xì)節(jié)處理和合理使用硬件加速。

以上就是css transition與filter blur模糊動(dòng)畫的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！