CSS使用过渡——transition属性

过渡

通过CSS3，我们可以在不使用Flash动画或者JavaScript的情况下，当元素从一种样式转换为另一种样式时为元素添加效果。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性	Chrome	IE	Firefox	Safari	Opera
transition	26.0 4.0 -webkit-	10.0 -ms-	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-delay	26.0 4.0 -webkit-	10.0 -ms-	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-duration	26.0 4.0 -webkit-	10.0 -ms-	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-property	26.0 4.0 -webkit-	10.0 -ms-	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-timing-function	26.0 4.0 -webkit-	10.0 -ms-	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

它如何工作？

CSS3过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 规定您希望把效果添加到哪个 CSS 属性上
• 规定效果的时长

过渡属性

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0（鼠标一放上去就开始）。	3

transition-property属性的值为其它属性的名称。一旦设置后，其值会慢慢变化，非其值会瞬间变化。

实例

应用于宽度属性的过渡效果，时长为2s

div
{
transition: width 2s;
-moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */
-o-transition: width 2s;	/* Opera */
}

注释：如果时长（transition-duration）未规定，则不会有过渡效果，因此默认值是0。

效果开始于指定的CSS属性改变值时，CSS属性改变的典型时间是鼠标指针位于元素上时

规定当鼠标指针悬浮于

元素上时

请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。

注释：本例在 Internet Explorer 中无效。

注释：当指针移出元素时，它会逐渐变回原来的样式。

多项改变

如需向多个样式添加过渡效果，请添加多个属性，有逗号隔开。

向宽度、高度和转换添加过渡效果

请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。

注释：本例在 Internet Explorer 中无效。

该例设置了所有的过渡属性

请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。

注释：本例在 Internet Explorer 中无效。

注释：这个过渡效果会在开始之前等待两秒。

对上例使用简写属性，一样能起到相同的过渡效果：

div
{
transition: width 1s linear 2s;

/* Firefox 4 */
-moz-transition:width 1s linear 2s;

/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;

/* Opera */
-o-transition:width 1s linear 2s;
}

transition-timing-function属性

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

注释：ease-in等三个属性的“慢速”效果比ease的要更慢。