【前端技术文档】CSS3 Transition 过渡属性

整    理：晋哲、徐秀

时    间：2015-11-05

说    明：Transition属性的介绍和简单的用法


一、定义

允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标指针浮动到元素上时、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

二、语法

transition: property duration timing-function delay;
需要注意的一点：transition-duration与transition-delay的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为时间的值为transition-duration，第二个为transition-delay。

1、属性名称：transition-property
2、过渡时间：transition-duration
3、变换速率：transition-timing-function
4、开始时间：transition-delay

三、属性

1、属性名称：transition-property
描述：规定设置过渡效果的 CSS 属性的名称。

其属性值:
none：没有属性会获得过渡效果。
all：所有属性都将获得过渡效果。（默认值）
[property]：定义应用过渡效果的元素属性名称，多个属性以逗号分隔
注：[property]是可以指定元素的某个属性值。其对应的类型可以是：color、值为数字的属性、transform属性等等。

2、过渡时间：transition-duration
描述：规定完成过渡效果需要花费的时间，以秒或毫秒计。默认值是 0，意味着不会有效果。

3、变换速率：transition-timing-function
描述：规定速度效果的速度曲线。

其属性值:
linear：匀速
ease：逐渐变快，再逐渐变慢（默认）
ease-in：加速
ease-out：减速
ease-in-out：加速然后减速
cubic-bezier(x1,y1,x2,y2)：贝塞尔曲线，自定义一个时间曲线



4、开始时间：transition-delay
描述：规定在过渡效果开始之前需要等待的时间，以秒或毫秒计，默认值是 0，意味着立即执行，没有延迟。

四、浏览器的兼容性

Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

为兼容各大现代浏览器，在应用transition时需要加上各自的前缀，如：
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-o-transition: all 2s linear;
transition: all 2s linear;

五、DEMO示例

实现效果：鼠标移上去时，宽度逐渐增加、改变背景色、方形变圆形，降低透明度。
<!-- HTML -->
<div class="box"></div>

<!-- CSS -->
.box{
    width: 100px;
    height: 100px;
    background: #000;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}
.box:hover{
    width: 300px;
    height: 300px;
    background: #f00;
    border-radius: 50%;
    opacity: .5;
}