transition-property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

transition-property 指定应用过渡属性的名称。

尝试一下

如果指定简写属性（比如 background），那么其完整版中所有可以动画的属性都会被应用过渡。

语法

css
/* Keyword values */
transition-property: none;
transition-property: all;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

transition-property: test1;
transition-property: test1, animation4;
transition-property: all, height, all;
transition-property:
  all,
  -moz-specific,
  sliding;

/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: unset;

取值

none

没有过渡动画。

all

所有可被动画的属性都表现出过渡动画。

IDENT

属性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头。

形式定义

初始值所有
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性否
计算值as specified
动画类型Not animatable

形式语法

transition-property = 
  none                           |
  <single-transition-property>#  

<single-transition-property> = 
  all             |
  <custom-ident>

示例

在 CSS 过渡中有几个示例可以参考。

规范

Specification
CSS Transitions
# transition-property-property

浏览器兼容性

BCD tables only load in the browser

参见