CSS3 过渡
CSS3 过渡功能允许 CSS 属性值的更改在指定的持续时间内平滑发生。
了解 CSS3 过渡
通常，当 CSS 属性的值发生变化时，渲染结果会立即更新。 一个常见的例子是在鼠标悬停时更改按钮的背景颜色。 在正常情况下，当您将光标放在按钮上时，按钮的背景颜色会立即从旧属性值更改为新属性值。
CSS3 引入了一个新的过渡特性，允许你随着时间的推移平滑地从旧值到新值的动画。 以下示例将向您展示如何在鼠标悬停时为 HTML 按钮的 background-color 设置动画。
button {
background: #fd7c2a;
/* For Safari 3.0+ */
-webkit-transition-property: background;
-webkit-transition-duration: 2s;
/* 标准语法 */
transition-property: background;
transition-duration: 2s;
}
button:hover {
background: #3cc16e;
}要使过渡发生，您必须至少指定两件事 — 您要使用 transition-property CSS 属性应用过渡效果的 CSS 属性的名称，以及使用 transition-duration CSS 属性的过渡效果的持续时间（大于 0）。 但是，所有其他 过渡属性 都是可选的，因为它们的默认值不会阻止过渡的发生。
注意： 并非所有 CSS 属性都是可动画的。 通常，任何接受数字、长度、百分比或颜色值的 CSS 属性都是可动画的。
执行多个过渡
每个过渡属性可以采用多个值，以逗号分隔，这提供了一种使用不同设置一次定义多个过渡的简单方法。
button {
background: #fd7c2a;
border: 3px solid #dc5801;
/* For Safari 3.0+ */
-webkit-transition-property: background, border;
-webkit-transition-duration: 1s, 2s;
/* 标准语法 */
transition-property: background, border;
transition-duration: 1s, 2s;
}
button:hover {
background: #3cc16e;
border-color: #288049;
}过渡速记属性
应用过渡时需要考虑许多属性。 但是，也可以在一个属性中指定所有过渡属性以缩短代码。
transition 属性是一个简写属性，用于按列出的顺序一次设置所有单独的过渡属性（即 transition-property, transition-duration, transition-timing-function, 和 transition-delay）。
使用此属性时，请务必遵守此值的顺序。
button {
background: #fd7c2a;
-webkit-transition: background 2s ease-in 0s; /* For Safari 3.0+ */
transition: background 2s ease-in 0s; /* 标准语法 */
}
button:hover {
background: #3cc16e;
}注意：如果缺少或未指定任何值，则将使用该属性的默认值。 这意味着，如果 transition-duration 属性的值缺失，则不会发生过渡，因为它的默认值为 0。
CSS3 过渡属性
下表提供了所有过渡属性的简要概述：
| 属性 | 说明 |
|---|---|
transition |
用于在单个声明中设置所有四个单独的转换属性的简写属性。 |
transition-delay |
指定何时开始转换。 |
transition-duration |
指定过渡动画完成所需的秒数或毫秒数。 |
transition-property |
指定应应用过渡效果的 CSS 属性的名称。 |
transition-timing-function |
指定如何计算受过渡影响的 CSS 属性的中间值。 |