CSS3过渡
CSS3过渡，您可以平滑地改变属性值（从一个值到另一个），在给定的时间。
例如：将鼠标悬停在元素的下面看到一个CSS3过渡效果：
CSS3
对于转换浏览器支持
在表中的数字规定，完全支持该属性的第一个浏览器版本。
其次通过数字-webkit-, -moz- ，或-o-指定用一个前缀工作的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-property | 26.0 4.0 -webkit- |
10.0 | 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 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
如何使用CSS3过渡？
要创建一个过渡效果，你必须指定两件事：
- 要添加效果的CSS属性
- 的效果的持续时间
注意：如果未指定的持续时间的一部分，则该过渡将是无效的，因为默认值是0。
下面的例子显示了100px * 100px红色<div>元素。 该<div>元素也指定了width属性转换效果，2秒的持续时间：
例
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
当指定的CSS属性（宽度）值改变的过渡效果将开始。
现在，让我们为width属性指定一个新值，当用户将鼠标移动到<div>元素：
请注意，当光标鼠标出来的元素，它会逐渐变回其原有的风格。
更改多个属性值
下面的示例中增加了宽度和高度都物业的过渡效果，以2秒的宽度和4秒钟的高度持续时间：
例
div
{
-webkit-transition: width 2s, height 4s; /*
Safari */
transition: width 2s, height 4s;
}
试一试» 指定过渡的速度曲线
在transition-timing-function属性指定的过渡效果的速度曲线。
过渡定时功能属性可以具有以下值：
-
ease-指定一个缓慢的开始的过渡效果，那么快的话，慢慢的结束（这是默认） -
linear-指定与从开始以相同的速度来结束过渡效果 -
ease-in-指定一个缓慢的开始的过渡效果 -
ease-out-指定一个缓慢的结束转场效果 -
ease-in-out-指定一个缓慢的开始和结束的过渡效果 -
cubic-bezier(n,n,n,n)-让你在定义你自己的价值观cubic-bezier函数
下面的例子示出了一些可用于不同的速度曲线：
例
#div1 {transition-timing-function: linear;}
#div2
{transition-timing-function: ease;}
#div3 {transition-timing-function:
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5
{transition-timing-function: ease-in-out;} 试一试» 拖延过渡效果
在transition-delay属性指定为过渡效果的延迟（以秒为单位）。
下面的例子有起动前1秒钟的延迟：
过渡转型+
下面的例子还增加了一个转型的过渡效果：
例
div {
-webkit-transition: width 2s, height
2s, -webkit-transform 2s; /* Safari */
transition:
width 2s, height 2s, transform 2s;
} 试一试» 更多转换示例
CSS3的过渡性质，可以指定一个接一个，像这样：
例
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
试一试» 或使用速记属性transition ：
自测练习用！
CSS3转换属性
下表列出了所有过渡属性：
| 属性 | 描述 |
|---|---|
| transition | 简写属性设置四个转变特性成一个单一的财产 |
| transition-delay | 指定的迁移效果的延迟（秒） |
| transition-duration | 指定过渡效果多少秒或毫秒需要完成 |
| transition-property | 指定CSS属性的过渡效果是名 |
| transition-timing-function | 指定的过渡效果的速度曲线 |