Appearance
四向滑动
元素从四个方向（上、下、左、右）滑入或滑出视图，利用 transform: translate() 配合 opacity 实现流畅的空间移动效果。
实时预览
⬆ 从下方滑入
⬇ 从上方滑入
➡ 从右侧滑入
⬅ 从左侧滑入
代码
css
/* 从下方滑入 */
.slide-from-bottom {
transform: translateY(30px);
opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease;
}
.slide-from-bottom.visible {
transform: translateY(0);
opacity: 1;
}
/* 从右侧滑入 */
.slide-from-right {
transform: translateX(30px);
opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease;
}
.slide-from-right.visible {
transform: translateX(0);
opacity: 1;
}html
<div class="slide-from-bottom">从下方滑入</div>
<div class="slide-from-right">从右侧滑入</div>
<!-- 上、左同理，替换 translate 方向 -->纯 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 可用，部分属性过渡不支持 |
使用说明
| 属性 | 说明 |
|---|---|
translateY(±n) | 垂直方向滑动，正下负上 |
translateX(±n) | 水平方向滑动，正右负左 |
opacity | 配合位移，入场时渐显 |
overflow: hidden | 父容器裁剪，防止溢出看到移动过程 |
0.5s ease | 平滑过渡时间 |
提示： transform 过渡由 GPU 加速，性能极佳。使用 IntersectionObserver 或滚动事件切换 .visible class 可实现滚动触发入场动画。