CSS3之transition过渡
# 一、transition 是什么？
transition是 CSS3 提供的一种 属性过渡效果。 它能让属性的变化在一定时间内 平滑进行，而不是立刻跳变。
📌 简单理解： 从 “旧样式” → “新样式”，中间有一个平滑动画过程。
# 二、基本语法格式
transition: property duration timing-function delay;
1
| 参数 | 说明 | 示例 |
|---|---|---|
property | 需要过渡的属性名（如 width、color） | all 表示所有可动画属性 |
duration | 动画持续时间 | 0.5s、200ms |
timing-function | 速度曲线函数（控制动画节奏） | ease、linear、ease-in |
delay | 动画延迟时间 | 0s、1s |
# 🔹 示例 1：最简单的 hover 过渡
✅ 效果：
鼠标移入时，盒子宽度变宽、颜色渐变，整个过程持续 0.5 秒。
# 三、transition 的常用四个属性
# 1️⃣ transition-property
指定哪些属性需要过渡。
transition-property: width, background-color;
1
如果写
all，表示所有可动画属性。
# 2️⃣ transition-duration
设置过渡时间。
transition-duration: 0.3s;
1
# 3️⃣ transition-timing-function
控制动画速度变化曲线。
| 值 | 说明 | 曲线特征 |
|---|---|---|
linear | 匀速 | —— |
ease | 默认值，缓慢开始和结束 | 🚶♂️ |
ease-in | 慢进快出 | ⤴️ |
ease-out | 快进慢出 | ⤵️ |
ease-in-out | 慢进慢出 | ↗️↘️ |
cubic-bezier(n, n, n, n) | 自定义贝塞尔曲线 | 🎨 |
示例：
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
1
👉 在 https://cubic-bezier.com (opens new window) 上可以在线调节曲线。
# 4️⃣ transition-delay
设置延迟时间。
transition-delay: 0.2s;
1
# 🔹 示例 2：四个属性分别写法
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in-out;
transition-delay: 0.5s;
1
2
3
4
2
3
4
等价于👇
transition: width 1s ease-in-out 0.5s;
1
# 四、多个属性过渡写法
transition:
width 1s ease-in,
height 0.5s linear,
background-color 0.8s ease-out;
1
2
3
4
2
3
4
✅ 每个属性可以定义不同的时间与曲线。
# 五、常见应用场景
| 场景 | 示例 |
|---|---|
| 🎨 hover 交互 | 按钮变色、图片放大 |
| 🧭 导航菜单 | 鼠标悬停展开动画 |
| 📦 模态框 | 出现/消失渐变效果 |
| 🔄 loading 动效 | 与 transform 结合旋转、缩放 |
# 🔹 示例 3：按钮 hover 动画
✅ 过渡更自然，有轻微放大效果。
# 六、过渡与 transform 配合使用（非常常见）
.card {
transition: transform 0.5s ease;
}
.card:hover {
transform: translateY(-10px) scale(1.05);
}
1
2
3
4
5
6
2
3
4
5
6
🎯 优点：
transform 不会触发布局回流（reflow），性能更好。
# 七、性能优化建议
| 建议 | 原因 |
|---|---|
✅ 优先使用 transform、opacity | 不触发布局与重绘，性能最佳 |
❌ 避免过渡 width / height | 会导致回流 |
✅ 使用 will-change 提前优化 | 通知浏览器提前准备动画层 |
| ✅ 简化过渡属性 | 避免使用 transition: all |
示例优化写法：
.box {
transition: transform 0.3s ease;
will-change: transform;
}
1
2
3
4
2
3
4
# 🧭 八、transition vs animation 对比
| 对比项 | transition | animation |
|---|---|---|
| 触发方式 | 状态变化（如 hover） | 可自动循环播放 |
| 是否需要触发条件 | 需要 | 不需要 |
| 控制复杂度 | 简单 | 高（支持关键帧） |
| 适用场景 | 简单过渡 | 连续动画、复杂动效 |
# 💡 九、结构化总结（思维导图结构）
CSS3 Transition（过渡）
├── 定义：样式变化的平滑动画
├── 语法：transition: property duration timing delay;
├── 四个属性
│ ├── transition-property
│ ├── transition-duration
│ ├── transition-timing-function
│ └── transition-delay
├── timing-function 曲线
│ ├── ease / linear / ease-in / ease-out / ease-in-out
│ └── cubic-bezier()
├── 应用场景
│ ├── hover 动效
│ ├── 导航展开
│ ├── 按钮放大
│ └── 模态框渐变
├── 优化建议
│ ├── 使用 transform / opacity
│ ├── 避免 all
│ ├── will-change 提前优化
└── 与 animation 对比
├── 触发：transition需触发，animation自动
├── 复杂度：transition简单，animation强大
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
上次更新: 2025/11/25, 03:24:47