CSS3 中的过渡效果

1.transition-property 设置对象中的参与过渡的属性

默认值为：all。默认为所有可以进行过渡的css属性。如果提供多个属性值，以逗号进行分隔。

语法：

transition-property：none | <single-transition-property>[ ,<single-transition-property> ]

<single-transition-property> = all | <IDENT>

取值：

• none：不指定过渡的css属性
• all：所有可以进行过渡的css属性
• <IDENT>：指定要进行过渡的css属性

示例：

<style type="text/css">
  ul li:hover{
    -webkit-transition-property:border-color,background-color,color;
    transition-property:border-color,background-color,color;
  }
</style>

2.transition-duration 设置对象过渡的持续时间

如果提供多个属性值，以逗号进行分隔。

语法：

transition-duration：<time>[ ,<time> ]

取值：

• <time>：指定对象过渡的持续时间

示例：

<style type="text/css">
  ul li:hover{
    -webkit-transition-duration:.5s;
    transition-duration:.5s;
  }
</style>

3.transition-timing-function 设置对象中过渡的动画类型

如果提供多个属性值，以逗号进行分隔。

语法：

transition-timing-function：<single-transition-timing-function>[,<single-transition-timing-function>]

<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

取值：

• linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
• ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
• ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
• ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
• ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
• step-start：等同于 steps(1, start)
• step-end：等同于 steps(1, end)
• steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end
• cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

示例：

<style type="text/css">
  ul li:hover{
    -webkit-transition-timing-function:ease-out;
    transition-timing-function:ease-out;
  }
</style>

4.transition-delay 设置对象延迟过渡的时间

如果提供多个属性值，以逗号进行分隔。

语法：

transition-delay：<time>[ ,<time> ]

取值：

• <time>：指定对象过渡的延迟时间

示例：

<style type="text/css">
  ul li:hover{
    -webkit-transition-delay:.7s;
    transition-delay:.7s;
  }
</style>

5.transition 复合属性，设置对象变换时的过渡效果

注意：如果只提供一个<time>参数，则为 <' transition-duration '> 的值定义；如果提供二个<time>参数，则第一个为 <' transition-duration '> 的值定义，第二个为 <' transition-delay '> 的值定义可以为同一元素的多个属性定义过渡效果。

语法：

transition：<single-transition>[,<single-transition>]

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

取值：

• <' transition-property '>：检索或设置对象中的参与过渡的属性
• <' transition-duration '>：检索或设置对象过渡的持续时间
• <' transition-timing-function '>：检索或设置对象中过渡的动画类型
• <' transition-delay '>：检索或设置对象延迟过渡的时间

示例：

<style type="text/css">
  ul li:hover{
    -webkit-transition:background-color .5s ease-in;
    transition:background-color .5s ease-in;
  }
</style>