过渡简写属性
最后更新：2026-09-13
transition 过渡简写属性
transition 是 CSS 中用于实现属性值平滑过渡的简写属性，可以在元素状态改变时（如 hover、focus）让样式变化以动画方式呈现，而不是瞬间跳变。通过指定目标属性、持续时间、速度曲线和延迟时间，就能轻松创建流畅的交互效果。它是构建现代 Web 微交互的基础工具。
| 分类 | |
|---|---|
| 初始值 | all 0s ease 0s |
| 继承 | 否 |
| 适用于 | all |
| 可动画 | shadow |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
transition: [ none | <single-transition> ]#;
/* <single-transition> = [ <property> | none ] || <time> || <easing-function> || <time> */⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<single-transition># | 值 | 过渡简写：属性 持续时间 时序函数 延迟 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transition | ✓ v26 | ✓ v12 | ✓ v16 | ✓ v6.1 | ✓ v12.1 |
| 所有主流浏览器均支持 | |||||
提示： 简写中若省略时序函数，默认为 ease；若省略延迟，默认为 0s。多个过渡用逗号分隔，可分别设置不同属性的过渡效果。
注意： 并非所有属性都可过渡，只有具有中间值的属性（如 color、opacity、transform）才能过渡；display 等离散属性无法过渡。
❓ 常见问题
Qtransition 和 animation 有什么区别？
Atransition 需要借助 hover、focus 等触发条件才能播放，且只有起始和结束两个状态；animation 配合 @keyframes 可以定义任意多个关键帧，能自动播放、循环播放和反向播放，功能更强大。简单说：状态变化用 transition，复杂序列动画用 animation。
Q如何只对部分属性启用过渡？
A通过 transition-property 显式列出要过渡的属性名，例如 transition-property: background, transform;。如果不指定，默认值是 all，所有可过渡属性都会参与过渡，既可能产生意料之外的动画，也会带来不必要的性能开销，建议尽量显式声明。
Qtransition 设置了却不生效，可能是什么原因？
A常见原因有四类：一是目标属性本身不可过渡（如 display、font-family）；二是起始值或结束值缺失，浏览器无从插值；三是 transition 写在了状态发生变化的那个伪类里而不是元素本身；四是简写顺序错误，duration 必须写在 delay 前面。
Qtransition 动画卡顿怎么办？哪些属性过渡性能差？
A不要用 transition 过渡会触发重排重绘的属性，如 width、height、top、left、margin、font-size；应优先过渡 transform 和 opacity，它们走合成器通道由 GPU 处理，60fps 下依然流畅。必要时加 will-change 提前建立合成层。
🏷️ 相关属性
💡 相关案例
📚 相关教程
