transition
==========

**`transition`** CSS 属性是 `transition-property`、`transition-duration`、`transition-timing-function` 和 `transition-delay` 的一个简写属性 (en-US)。

尝试一下
----

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 `:hover`，`:active` 或者通过 JavaScript 实现的状态变化。

语法
--


```css
/\* Apply to 1 property \*/
/\* property name | duration \*/
transition: margin-right 4s;

/\* property name | duration | delay \*/
transition: margin-right 4s 1s;

/\* property name | duration | timing function \*/
transition: margin-right 4s ease-in-out;

/\* property name | duration | timing function | delay \*/
transition: margin-right 4s ease-in-out 1s;

/\* Apply to 2 properties \*/
transition:
  margin-right 4s,
  color 1s;

/\* Apply to all changed properties \*/
transition: all 0.5s ease-out;

/\* Global values \*/
transition: inherit;
transition: initial;
transition: unset;
```


`transition`属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。

每个单属性转换都描述了应该应用于单个属性的转换（或特殊值`all`和`none`）。这包括：

* 零或一个值，表示转换应适用的属性。这可能是以下任何一种：
    + 关键字`none`
    + 关键字`all`
    + 命名 CSS 属性的 `<custom-ident>` 。
* 零或一个 `<single-transition-timing-function>` (en-US) 值表示要使用的过渡函数
* 零，一或两个 `<time>` 值。可以解析为时间的第一个值被分配给 `transition-duration`，并且可以解析为时间的第二个值被分配给`transition-delay`。

请查看“如何处理”以了解当`transition`属性的值个数超过可以接收的值的个数时该如何处理。简而言之，当`transition`属性的值个数超过可以接收的值的个数时，多余的值都会被忽略掉，不再进行解析。

### 标准语法
```

transition =   
  <single-transition>#    
  
<single-transition> =   
  [ none | <single-transition-property> ]  ||  
  <time>                                   ||  
  <easing-function>                        ||  
  <time>                                     
  
<single-transition-property> =   
  all             |  
  <custom-ident>    
  
<easing-function> =   
  linear                          |  
  <linear-easing-function>        |  
  <cubic-bezier-easing-function>  |  
  <step-easing-function>            
  
<linear-easing-function> =   
  linear( <linear-stop-list> )    
  
<cubic-bezier-easing-function> =   
  ease                                                |  
  ease-in                                             |  
  ease-out                                            |  
  ease-in-out                                         |  
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )    
  
<step-easing-function> =   
  step-start                             |  
  step-end                               |  
  steps( <integer> , <step-position>? )    
  
<linear-stop-list> =   
  [ <linear-stop> ]#    
  
<step-position> =   
  jump-start  |  
  jump-end    |  
  jump-none   |  
  jump-both   |  
  start       |  
  end           
  
<linear-stop> =   
  <number>               &&  
  <linear-stop-length>?    
  
<linear-stop-length> =   
  <percentage>{1,2}    
  
```

示例
--

“使用 CSS 过渡”一文中还包含了几个 CSS 过渡示例。

规范
--

| Specification |
| --- |
| CSS Transitions # transition-shorthand-property |

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `transition-delay`: `0s`
* `transition-duration`: `0s`
* `transition-property`: all
* `transition-timing-function`: `ease`
* `transition-behavior` (en-US): `normal`
 |
| 适用元素 | all elements, `::before` and `::after` pseudo-elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `transition-delay`: as specified
* `transition-duration`: as specified
* `transition-property`: as specified
* `transition-timing-function`: as specified
* `transition-behavior` (en-US): as specified
 |
| Animation type | Not animatable |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Using CSS transitions
* `TransitionEvent`