淡入淡出

最基本的 CSS 过渡动画，通过 opacity 属性实现元素的透明度渐变，适用于几乎所有 UI 场景。

实时预览

悬停淡出

悬停淡入

呼吸脉冲

代码

css

/* 淡出 */
.fade-out {
  opacity: 1;
  transition: opacity 0.6s ease;
}

.fade-out:hover {
  opacity: 0.1;
}

/* 淡入 */
.fade-in {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.fade-in:hover {
  opacity: 1;
}

/* 呼吸脉冲 */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.fade-pulse {
  animation: pulse 2s ease-in-out infinite;
}

html

<div class="fade-out">悬停淡出</div>
<div class="fade-in">悬停淡入</div>
<div class="fade-pulse">呼吸脉冲</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 可用，部分属性过渡不支持

使用说明

属性	说明
`opacity`	0 = 完全透明，1 = 完全不透明
`transition: opacity 0.6s ease`	平滑过渡 0.6 秒
`ease`	默认缓动曲线，自然减速
`@keyframes`	用于持续循环的呼吸动画

提示： opacity 过渡会触发 GPU 合成层，性能优于 visibility 切换。如需完全隐藏元素，可配合 pointer-events: none 防止交互。

淡入淡出 ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐