CSS3过渡属性是CSS3中新增的一种特性，它可以让元素在不同的状态之间过渡，从而使页面更加生动有趣。
CSS3过渡属性可以用来定义元素在不同状态之间的过渡效果，例如当鼠标悬停在元素上时，可以让元素从一个颜色变成另一个颜色；当元素的大小发生变化时，也可以使用过渡属性来定义元素的大小变化效果。
transition: property duration timing-function delay;
上面是CSS3中过渡属性的语法格式，property表示要应用过渡效果的CSS属性；duration表示过渡效果所需要的时间；timing-function表示过度效果的速度函数；delay表示开始执行过度效果前要延时多长时间。
CSS3中有很多不同的速度函数，例如linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier 等。不同的速度函数会产生不同的动画效果。例如linear函数会产生匀速动画效果；ease函数会产生快到慢再到快的动画效果。
使用CSS3过渡，我们可以通过改变CSS属性来创建动画。
我们可以控制时间，从值到值。
例如，我们可以在一秒钟内将元素的颜色从白色更改为黑色。
下表列出了所有过渡属性：
要使用CSS3过渡创建动画，我们必须指定两个值：
以下代码为width属性添加了一个过渡效果，持续时间为2秒。
我们首先设置目标属性和持续时间。
div {
-webkit-transition: width 2s;
transition: width 2s;
}
如果未指定持续时间部分，则默认值为0，并且不会有转换。
我们必须触发属性变化。以下代码使用鼠标悬停事件触发元素上的动画。
div:hover {
width: 300px;
}
这里是完整的源代码。将鼠标悬停在上面的div元素上，查看过渡效果。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: black;
-webkit-transition: width 2s;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div>Hi</div>
</body>
</html>我们可以通过用逗号分隔属性来为多个CSS属性添加过渡效果。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: black;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
</style>
</head>
<body>
<div>Hover me to see the transition effect!</div>
</body>
</html>
上面的代码呈现如下：
| 属性 | 描述 | CSS |
|---|---|---|
| transition-delay | 延迟转换前 | 3 |
| transition-duration | 设置转换的持续时间 | 3 |
| transition-property | 在过渡效果中设置CSS属性的名称 | 3 |
| transition-timing-function | 设置过渡效果的速度曲线 | 3 |
| transition | 设置四个过渡属性的速度属性 | 3 |
CSS 和 HTML 都是前端技术的核心语言，那么这两者分别是干什么的？又有什么区别呢？HTML（结构）全称 HyperTextMark...
HTML事件属性onggle触发 ontoggle 属性事件当打开或关闭＆lt; details＆gt; 元件。HTML5中的新功能 ontoggle 属性在HTML5中是新...
table 标签用来定义 HTML 表格，一个简单的 HTML 表格应该包括两行两列，如下述示例所示：实例一个简单的 HTML 表格，包含两列两...
HTML track 标签srclang 属性用来定义 track 使用的语言，请参考下述的示例：实例带有两个字幕轨道的 video 元素：video width="...
定义和用法HTML5 acronym 标签用来定义首字母缩写词，比如 "WWW"。通过对只取首字母缩写进行标记，您就能够为浏览器、拼写检查程...
实例HTML5 ruby标签作为注释标签使用。请参考下述示例：一个 ruby 注释：ruby汉 rp(/rprtHan/rtrp)/rp字 rp(/rprtZi/rtrp)/rp/ru...
实例HTML5 使用 hgroup 对标题进行组合：hgrouph1Welcome to my WWF/h1h2For a living planet/h2/hgrouppThe rest of the conten...
定义和用法ul 标签定义无序列表。HTML 4.01 与 HTML 5 之间的差异在 HTML 4.01 中，ul 元素的 "compact" 和 "type" 属性是不被赞...
实例HTML5 colgroup标签可以组合col标签。colgroup 和 col 标签为表格中的三个列设置了背景色： table border="1"colgroupcol sp...
