Appearance
淡入滑动
淡入+滑动组合
实时预览
淡入滑动
代码
css
.fade-slide-box{width:160px;height:120px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;opacity:0;transform:translateY(20px);transition:all .5s}
.fade-slide-wrapper:hover .fade-slide-box{opacity:1;transform:translateY(0)}纯 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 可用，部分属性过渡不支持 |