css3的过度,transition

transition

版本：CSS3

transitionCSS属性是

示例/* 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:[,]*

取值：

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

每个单属性转换都描述了应该应用于单个属性的转换(或特殊值none)。这包括：零或一个值，表示转换应适用的属性。这可能是以下任何一种：关键字none、关键字all、命名 CSS 属性的。

零或一个值表示要使用的过渡函数

零，一或两个

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

说明：

复合属性。检索或设置对象变换时的过渡。

=[ none| ] ||||||注意：如果只提供一个参数，则为参数，则第一个为

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

缩写方式：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。默认值看每个独立属性

适用于所有元素，包含伪对象:after和:before

继承性无

动画性否

计算值看每个独立属性

实例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:width2s;

-webkit-transition:width2s; /*safari*/

}

div:hover{width:300px;}