使用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 |
响应式 Web 设计 - 视频(Video)使用 width 属性 如果 width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例： 实例vide...
此 HTML 快速参考备忘单以易于阅读的格式列出了常见的 HTML 标记及其属性。 开始hello.html!DOCTYPE htmlhtml lang="en"headmeta...
CSS 伪类 (Pseudo-classes)CSS 伪类是用来添加一些选择器的特殊效果。由于状态的变化是非静态的，所以元素达到一个特定状态时，...
