transition

版本：CSS3

transitionCSS属性是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）。这包括：

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

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

说明：

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

<single-transition>=[ none| <single-transition-property>] ||<time>||<single-transition-timing-function>||<time>

• transition-property：检索或设置对象中的参与过渡的属性
• transition-duration：检索或设置对象过渡的持续时间
• transition-timing-function：检索或设置对象中过渡的动画类型
• transition-delay：检索或设置对象延迟过渡的时间
• 注意：如果只提供一个<time>参数，则为transition-duration的值定义；如果提供二个<time>参数，则第一个为transition-duration的值定义，第二个为transition-delay的值定义
• 可以为同一元素的多个属性定义过渡效果。示例：

  缩写方式：

  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。

实例

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;}