如何通过transition-property属性精确设置CSS过渡效果影响的属性列表？

本文共计1045个文字，预计阅读时间需要5分钟。

CSS的`transition`属性只对可动化属性（animatable properties）生效，例如`color`、`opacity`、`transform`、`width`、`height`、`margin`、`padding`等都可以使用过渡效果。但是，像`display`、`position`、`z-index`、`font-family`这类属性不支持过渡效果，即使更改了也不会产生过渡效果。

查具体支持情况，最可靠的方式是看 MDN 上每个 CSS 属性文档页的「Animatable」字段，例如 MDN width#animatable 明确写 yes。

• transition-property: all 会尝试对所有可动画属性生效，但容易误触（比如无意中触发 box-shadow 或 filter 的过渡）
• transition-property: none 表示禁用过渡，即使写了 transition-duration 也无效
• 多个属性用逗号分隔：transition-property: color, transform, opacity

transition-property 和 transition 值顺序是否必须对应

不必须。