模糊过渡

利用 CSS filter: blur() 实现元素从模糊到清晰（或反向）的过渡效果，营造朦胧梦幻的视觉感受。

实时预览

🔍模糊→清晰

🌫️清晰→模糊

✨模糊+亮化

代码

css

/* 模糊到清晰 */
.blur-in {
  filter: blur(12px);
  opacity: 0.6;
  transition: filter 0.6s ease, opacity 0.6s ease;
}

.blur-in:hover {
  filter: blur(0);
  opacity: 1;
}

/* 清晰到模糊 */
.blur-out {
  filter: blur(0);
  opacity: 1;
  transition: filter 0.6s ease, opacity 0.6s ease;
}

.blur-out:hover {
  filter: blur(8px);
  opacity: 0.5;
}

html

<div class="blur-in">从模糊到清晰</div>
<div class="blur-out">从清晰到模糊</div>

纯 CSS 实现的模糊过渡过渡动画效果——通过 transition 属性在两个状态之间平滑切换。适用于页面元素显示/隐藏、弹窗、Tab 切换等场景。

快速使用

复制 CSS 代码到你的样式文件中
给目标元素添加初始状态样式（opacity: 0; transform: ... 等）
通过 JavaScript 添加/移除类名触发过渡动画
调整 transition-duration 和 transition-timing-function 控制动画效果

使用场景

页面路由切换：淡入/滑动过渡让页面跳转更流畅
弹窗/对话框：缩放弹出+遮罩淡入营造前后层级关系
内容展开/折叠：过渡动画让内容区域的显示隐藏更自然
Tab 切换：裁剪揭示或滑动效果让标签页切换有方向感

常见问题

Q: transition 和 animation 应该用哪个？ A: 简单规则：两个状态之间的过渡用 transition（hover、类切换）；复杂的多阶段动画用 animation（loading、背景动画、循环动画）。transition 代码更少、性能更好。

Q: 为什么我的 transition 没有动画效果？ A: 常见原因：1) 起始状态没有设置目标属性值；2) 属性值类型不匹配（如 auto 到具体值不会过渡）；3) display: none 到 display: block 不会过渡。用 opacity + visibility 代替 display 变化。

Q: 如何让过渡看起来更自然？ A: 使用 cubic-bezier() 自定义缓动曲线。进入动画用 ease-out（快→慢），离开动画用 ease-in（慢→快）。Material Design 推荐的缓动值：cubic-bezier(0.4, 0.0, 0.2, 1)。

浏览器兼容性

浏览器	兼容性
Chrome / Edge	✅ 完全支持
Firefox	✅ 完全支持
Safari	✅ 完全支持
移动端浏览器	✅ 完全支持
IE 11	⚠️ 基础 transition 可用，部分属性过渡不支持

使用说明

属性	说明
`filter: blur(n)`	模糊半径，单位 px
`blur(0)`	完全清晰
`blur(12px)`	较强模糊效果
`opacity`	配合模糊变化增强层次感
`brightness()`	可叠加亮度变化

提示： blur() 是 GPU 加速的滤镜，但大模糊半径在移动端可能有性能问题。建议模糊值 ≤ 20px。可组合 blur() + brightness() 制造发光效果。

模糊过渡 ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐