CSS3 transition 属性

将鼠标悬停在一个 div 元素上，逐步改变表格的宽度从 100px 到 300px：

div
{
    width:100px;
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}

属性定义及使用说明

transition 属性设置元素当过渡效果，四个简写属性为：

• transition-property: 指定要过渡的 CSS 属性的名称。例如，color、background-color 等。
• transition-duration: 指定过渡效果持续的时间，以秒或毫秒为单位。
• transition-timing-function: 指定过渡效果的速度曲线。它可以是 linear（线性）、ease（渐入渐出）、ease-in（渐入）、ease-out（渐出）、ease-in-out（先渐入后渐出）等等。
• transition-delay: 指定过渡效果开始之前的延迟时间，以秒或毫秒为单位。

常用实例：

/* 对所有属性都应用过渡效果 */
.element {
  transition: all 0.3s ease;
}

/* 对指定属性（颜色）应用过渡效果 */
.element {
  transition: color 0.3s ease-in-out;
}

注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。

浏览器支持

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

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

语法

transition: property duration timing-function delay;