CSS3 transition-property属性

transition-property 属性用于指定在 CSS 过渡效果中应用过渡的 CSS 属性的名称。通过指定一个或多个属性名称，可以控制哪些属性会发生过渡效果。

语法

transition-property: none | all | property1, property2, ...;

• none: 默认值，表示没有属性会发生过渡效果。
• all: 所有属性都会发生过渡效果。
• property1, property2, ...: 指定具体哪些属性会发生过渡效果，多个属性使用逗号分隔。

示例

// www.javascriptcn.com code example
/* 对所有属性都应用过渡效果 */
.element {
  transition-property: all;
}

/* 只对颜色和背景颜色发生过渡效果 */
.element {
  transition-property: color, background-color;
}

注意事项

• 当指定多个属性时，过渡效果会按照属性列表中的顺序依次应用。
• 如果某个属性在 transition-property 中指定了，但在 transition-duration 或 transition-timing-function 中未指定，则该属性的过渡效果会使用默认值。
• 使用 transition-property 可以避免不必要的过渡效果，提高页面性能。