Appearance
缩放过渡
元素通过 transform: scale() 实现缩放入场/退场效果，从微小状态放大到正常尺寸，或反之缩小消失。
实时预览
从小放大
从大缩小
弹性放大
代码
css
/* 从小放大 */
.scale-up {
transform: scale(0.5);
opacity: 0;
transition:
transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.4s ease;
}
.scale-up.visible {
transform: scale(1);
opacity: 1;
}
/* 弹性缩放 */
.scale-bounce {
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.scale-bounce:hover {
transform: scale(1.15);
}html
<div class="scale-up">从小放大</div>
<div class="scale-bounce">弹性缩放</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 可用，部分属性过渡不支持 |
使用说明
| 属性 | 说明 |
|---|---|
scale(0.5) | 缩小到 50% |
scale(1.15) | 放大到 115% |
cubic-bezier(0.34, 1.56, 0.64, 1) | 弹性缓动曲线，有回弹效果 |
transform-origin | 默认中心缩放，可改为 top left 等 |
opacity | 配合缩放，避免缩放过程中看到元素 |
提示： cubic-bezier(0.34, 1.56, 0.64, 1) 是常用的弹性缓动，第二个值 > 1 产生过冲回弹效果。也可用 scaleX() / scaleY() 实现单方向缩放。