CSS3 transition 属性
实例
将鼠标悬停在一个 div 元素上，逐步改变表格的宽度从 100px 到 300px：
div
{
width:100px;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}
尝试一下 >
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
属性定义及使用说明
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;
}
.element {
transition: all 0.3s ease;
}
/* 对指定属性（颜色）应用过渡效果 */
.element {
transition: color 0.3s ease-in-out;
}
| 默认值： | all 0 ease 0 |
|---|---|
| 继承： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.transition="width 2s" |
语法
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 指定CSS属性的name，transition效果 |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function | 指定transition效果的转速曲线 |
| transition-delay | 定义transition效果开始的时候 |