transition

版本： CSS3

transition CSS属性是 transition-property ， transition-duration ， transition-timing-function 和 transition-delay 的一个简写属性。过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover ， :active 或者通过 JavaScript 实现的状态变化。

示例

/* 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;

浏览器支持

IE10以上浏览器都支持 transition

语法

transition : <single-transition> [, <single-transition> ]*

复合属性。检索或设置对象变换时的过渡。 transition 属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。每个单属性转换都描述了应该应用于单个属性的转换（或特殊值 all 和 none ）。

取值：

<single-transition> =[ none | all | transition-property ] || transition-duration || transition-timing-function || transition-delay

• transition-property ：检索或设置对象中的参与过渡的属性。零或一个值，表示转换应适用的属性。这可能是以下任何一种：关键字 none 、关键字 all 、命名 CSS 属性的 <custom-ident> 指用户自定义字符串标识符。
• transition-duration ：检索或设置对象过渡的持续时间。其值为 <time> 。
• transition-timing-function ：检索或设置对象中过渡的动画类型。零或一个值，表示要使用的过渡函数。
• transition-delay ：检索或设置对象延迟过渡的时间。其值为 <time> 。

注意：如果只提供一个 <time> 参数，则为 transition-duration 的值定义；如果提供二个 <time> 参数，则第一个为 transition-duration 的值定义，第二个为 transition-delay 的值定义。

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

实例

可以为同一元素的多个属性定义过渡效果

缩写方式：

transition: border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

拆分方式：

transition-property: border-color, background-color, color; 
transition-duration:.5s,.5s,.5s; 
transition-timing-function: ease-in, ease-in, ease-in; 
transition-delay:.1s,.1s,.1s;

如果定义了多个过渡的属性，而其他属性只有一个参数值，则表明所有需要过渡的属性都应用同一个参数值。

拆分方式：

transition-property: border-color, background-color, color; 
transition-duration:.5s; 
transition-timing-function: ease-in; 
transition-delay:.1s;

如果需要定义多个过渡属性且不想指定具体是哪些属性过渡，同时其他属性只有一个参数值

缩写方式：

transition: all .5s ease-in .1s;

拆分方式：

transition-property:all; 
transition-duration:.5s; 
transition-timing-function: ease-in; 
transition-delay:.1s;

transition: margin-right 2s;
transition: margin-right 2s .5s;
transition: margin-right 2s ease-in-out;
transition: margin-right 2s ease-in-out .5s;
transition: margin-right 2s, color 1s;
transition: all 1s ease-out;

div{
    width:100px;
    transition:width 2s;
    -webkit-transition:width 2s;    /*safari*/
}

div:hover{width:300px;}