过渡属性名属性

最后更新：2026-09-13

transition-property 过渡属性名属性

transition-property 用于指定哪些 CSS 属性在发生变化时应用过渡效果。默认值为 all，表示所有可过渡属性都会参与过渡；也可以显式列出特定属性名，避免不必要的性能开销和意外的动画行为。

分类
初始值	all
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

transition-property: none | all | <property>#;

⚙️ 取值

值	类型	描述
`all \| none`	关键字	全部或无
`<property>`	类型	指定过渡属性

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
transition-property	✓ v26	✓ v12	✓ v16	✓ v6.1	✓ v12.1
所有主流浏览器均支持

注意： 使用 all 虽然方便，但所有可过渡属性变化都会触发过渡，可能导致意料之外的效果（如 font-size 变化也过渡）。建议显式指定需要的属性。

❓ 常见问题

Q哪些属性可以被 transition-property 指定？

A只有「可插值」的属性才能过渡，如 color、opacity、transform、box-shadow、filter、width/height 等有中间数值的属性；display、visibility、font-family 等离散属性无法平滑过渡，会直接跳变。

Q设为 none 有什么用？

Anone 表示任何属性都不参与过渡，等效于关闭该元素的过渡效果。常用于在某个状态下临时禁用过渡，比如页面首次加载时避免元素从初始位置「飞入」，先禁用过渡再恢复正常。也可以用来重置从父级或全局样式中继承下来的过渡设置。

Qtransition-property: all 有什么坑？为什么不推荐用 all？

Aall 会让所有可过渡属性在变化时都参与过渡，带来两个问题：一是性能开销，改变 font-size、line-height 等意外属性也会被动画化；二是行为难控，容易出现「不受控的动画」。建议显式列出需要过渡的属性，既省性能又易维护，all 只适合过渡属性很少的小组件。

Q为什么 height: auto 不能过渡？

Aheight: auto 没有明确的中间值，浏览器无法在 height: 0 和 auto 之间插值，动画会直接跳变。替代方案：用 max-height 技巧、用 grid-template-rows: 0fr 到 1fr 过渡展开、或用 scaleY() 配合 transform-origin 做视觉展开。