CSS过渡效果完全指南

CSS过渡基础

CSS过渡允许属性值在一定时间内平滑变化，而非瞬间完成。需明确指定目标属性、持续时间才能生效。

核心三要素

• 属性发生变化（如宽度、颜色）
• 指定过渡属性（transition-property）
• 定义过渡时长（transition-duration）

---

过渡触发方式

通过以下伪类或事件触发过渡效果：

• :hover 鼠标悬停
• :active 鼠标按下
• :focus 元素聚焦
• @media 媒体查询条件匹配
• 点击事件（如JavaScript触发）

---

过渡属性详解

transition-property

定义哪些CSS属性应用过渡效果。

• none：无过渡
• all：所有属性过渡
• property：指定属性（如width, opacity）

示例

.box {transition-property: width, background-color;
}

---

transition-duration

设置过渡持续时间，单位秒（s）或毫秒（ms）。

示例

.box {transition-duration: 0.5s, 2s; /* 分别对应width和background-color */
}

---

transition-timing-function

控制过渡的速度曲线，默认ease。

• linear：匀速
• ease-in：加速
• ease-out：减速
• cubic-bezier(n,n,n,n)：自定义贝塞尔曲线

示例

.box {transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

---

transition-delay

延迟过渡开始时间。

示例

.box {transition-delay: 1s; /* 1秒后开始过渡 */
}

---

过渡连写语法

使用transition简写属性合并所有参数：

.box {transition: property duration timing-function delay;
}

连写示例

.box {transition: width 0.5s ease-in-out 1s, background-color 2s linear;
}

过渡连写格式

过渡连写通过 transition 属性实现，可以同时设置多个过渡效果。基本语法如下：

transition: property duration timing-function delay;

过渡连写注意点

多个属性添加过渡效果时，用逗号隔开：

transition: width 1s ease, height 0.5s linear;

连写时可以省略后两个参数（timing-function 和 delay），仅保留 property 和 duration：

transition: opacity 2s;

如果多个属性的运动速度、延迟时间和持续时间相同，可以简写为 all：

transition: all 0.5s ease-in-out;

实际应用示例

为宽度和高度设置相同的过渡效果：

.box {transition: all 0.3s ease;
}

为不同属性设置不同的过渡效果：

.element {transition: background-color 1s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

简写技巧

• 多个属性用逗号分隔。
• 若速度/延迟/时长相同，可简写为：

  .box {transition: all 0.3s ease;
  }
  

---

实战注意事项

• 非数值属性（如display）无法过渡。
• 性能优化：避免过渡box-shadow等高性能消耗属性。
• 贝塞尔曲线工具推荐使用在线生成器（如cubic-bezier.com）。

通过合理组合属性，可实现复杂动画效果，增强用户体验。