使用 CSS3 过渡： 完全指南

如果您已经阅读了最新的 CSS 相关技术和技巧，那么毫无疑问，您可能已经读过一些涉及 CSS3 过渡主题的文章、博客文章和教程，这有助于您在一定期限内顺利实现 CSS3 的价值。介绍 CSS3 过渡 的 W3C 规范的模块现已接近候选推荐状态，这意味着该项 CSS3 技术现已成为许多现代 CSS 开发人员工具箱中的主要技术。

本文将深入介绍 CSS3 过渡。 希望您在读过这篇文章之后，能够对 CSS3 过渡具有更加全面的理解，同时还提供了一些实用技巧和技术，帮助您在新项目中实现此功能。

过渡语法通常以简化形式表达，出于简洁性和便于维护，强烈建议这样做。 我稍后会在本节中对此进行详细说明，但现在，我要介绍一个采用普通书写符号的简单过渡示例：

注意，为简洁起见，本文展示的所有代码示例均未提供供应商前缀。 使用代码时，请务必确保在使用过渡的情况下纳入所有必要的前缀，并始终在末尾提供不带前缀的标准规则。

下面是上述示例的分解结构。

transition-property

transition-property 行定义要过渡或动态模拟的 CSS 属性。 此属性的值可以是要动态模拟的任意属性，只要是 动画属性 即可。 默认值为 none，这意味着不存在属性过渡； 同样，如果您将值指定为 all，则所有动画属性均将应用于元素过渡。

transition-duration

transition-duration 属性指定完成过渡所需的时间。 也就是说，从过渡开始到结束的持续时间。 当元素过渡返回原始状态后，将重复显示过渡。 您可以用秒 (数字后紧跟单位 "s") 或者毫秒 ("ms")为单位指定持续时间。 默认值为 0s。

transition-timing-function

transition-timing-function 属性指定某种指代过渡 "缓动函数" 的属性。 此属性可指定浏览器的过渡速度，以及过渡期间的操作进展情况。 您可以将某个值指定为预定义函数、阶梯函数或三次贝塞尔曲线。 默认值为 ease。 其他预定义值包括 linear, ease-in, ease-out, 和 ease-in-out。 有关阶梯函数和贝塞尔曲线的更多信息，请参阅 transition-timing-function 属性规范。在大部分情况下，定时函数很难区分彼此，除非过渡持续时间超过一秒或两秒。

transition-delay

属性指定过渡开始前出现的延迟。 也就是说，在触发过渡后，延迟代表发生任何过渡前流逝的时间。 您可以指定秒数或毫秒数。 负值同样有效，因为这可能导致中途开始进行过渡（有效扭转了延迟）。

过渡简写

如上所述，您可以将所有这些属性指定为单一速记声明的一部分。 因此，您可以将上面的示例表达如下：

时间相关值的顺序至关重要。 第一个时间值始终代表持续时间，因此如果您希望纳入延迟，则必须首先定义持续时间。

多项过渡

您可以使用上面讨论的 transition-property 普通书写语法，用逗号分隔要过渡的各个属性，从而声明多项过渡。 反过来，其他普通书写值允许包含逗号分隔值，使其对应于 transition-property 值。

然而，简写语法进一步简化了此操作，能够同时声明多项属性过渡。 为此，您只需用逗号分隔声明，如下所示：

如果您愿意，可以在一行上显示多个属性，或者为提高可读性将各过渡声明各占一行，如上面的示例所示。

既然您已经很好地掌握了 CSS3 过渡语法，那么应当如何实际触发过渡呢？ 上面所述的示例定义了过渡操作的各个层面，但却并没有指定触发过渡的时间和方法。 因此，就目前的状况而言，单纯通过代码不会触发任何操作。

开发人员最常用的过渡触发方法是使用 :hover 伪类。  因此， 加上 :hover 触发器后，代码可能如下所示：

有了这个代码，如果用户将鼠标悬停在该元素之上，背景颜色会在经过一秒钟的初始延迟后，于两秒钟内动态地从绿色变为蓝色。

事实上，触发过渡与触发器 (在上述情况下，触发器为 :hover)本身没有太大关系。 实际触发过渡的是元素状态变化。

在上面的示例中，状态变化是指从绿色背景颜色变为蓝色背景颜色。 凑巧的是，状态变化作为:hover 事件的结果发生。

为说明这与触发过渡的实际事件毫无关联，也为强调状态变化的重要性，下面提供了一些触发过渡的其他方法。

使用 :active

:active 伪类表示用户单击某个元素并按住鼠标按钮时显示的状态。该代码如下所示：

在这个示例中，当用户单击并按住元素时，发生宽度属性过渡，因此该元素保持 "活动" 状态。

使用 :focus

:focus 伪类通常会在元素接收键盘关注时出现。该代码如下所示：

在这种情况下，窗体输入元素上将会发生过渡，且该字段接收关注时会执行窗体输入元素宽度过渡

此处作为一个边点，如有可能，当对 :hover 伪类应用过渡时，最好将 :focus 添加至您的选择器堆栈。 这样，将能够丰富鼠标用户和键盘用户的体验。

使用 :checked

:checked 伪类。 为在发生这种状况时触发过渡，您需要执行以下代码：

在这种情况下，虽然宽度变化不会实际为复选框本身带来任何可见差别，但仍会显得凹陷，因为窗体字段所占的空间将增大。

使用媒体查询

触发元素状态变化的另一种方法是使用 CSS3 媒体查询。 如果您学习过媒体查询，那么一定知道它能够让您根据某些元素(比如设备宽度和方向)更改应用于元素的样式。 媒体查询过渡可能如下所示：

在这个示例中，该元素的宽度和高度为 200px × 200px。 但是，如果用户将自己的窗口大小调整到 960px 或以下，则元素将过渡为更小的尺寸： 100px × 100px。 当窗口超过 960px 的阈值后，将会发生过渡。

当然，如果网页加载时用户的窗口大小是 960px 或以下，浏览器会在该部分应用这些样式，但是由于不会出现状态变化，因此不会发生过渡。

正如您在上面的示例中所见，您基本上可以通过在某种程度上更改元素 CSS 的任何事件触发过渡。 因此，只要更改的属性是动画属性，就会发生过渡。

在这一点上，您可能已经理解： 如果您可以通过基于 CSS 的状态更改触发过渡，那么自然可以通过 JavaScript 做到这一点。

在下面的示例中，当使用纯粹的 CSS 示例时同样也会发生过渡，也就是说，它是 CSS 状态变化的结果，但是，这一次是通过 JavaScript 触发的过渡。

下面的示例使用简单的 jQuery 脚本切换元素类名称：

假设您的标记中具有包含 box 类的元素和 button 元素 ID，则每次用户单击 #button 元素时，此脚本都会将 style-change 类切换为 box。

尽管其本身没有任何作用。 您可以向 style-change 类添加过渡，这样，每次添加或删除类时，在两个声明块中指定的值之间来回进行宽度和高度  过渡，如下所示：

同样，此代码段重点强调样式发生变化导致过渡的点，您可以通过任意数量的方法触发这些更改，包括通过 JavaScript.

这是在考虑是否要使用 CSS 过渡替换 JavaScript 时需要牢记的重要一点。 我发现一条需要牢记的有效规则，即事件通常应当通过 JavaScript 触发，简单动画或过渡则应使用 CSS 触发。 当然，这只是一般性的指导原则，不一定是最佳选择，具体应视条件而定。

现在，您已经对过渡语法及其使用方式有了很好的掌握，我将会介绍几项小技巧，您或许会在某个项目中派上用场。

开关状态的不同过渡方式

此刻，在测试完某些示例后，您可能已经注意到，过渡时通常会进入"开启" 状态，并且随后会回到最初的 "关闭" 状态。 但是，还有一种方式定义其他开关状态过渡方式。

在下面的代码示例中，开关状态均会导致背景颜色的过渡：

让我们来改一下关闭状态的持续时间和计时函数，如下所示：

在这段代码中，我将最初的过渡声明转为 :hover 状态，并在触发 :hover前向元素应用的样式添加了一行新代码。 现在，"开启" 过渡需要两秒钟 （指定为 2s linear）， and the "关闭" 过渡需要一秒钟 （指定为 1s ease-out）。

这个想法的关键在于，指定浏览器当元素过渡从绿色变为蓝色时，使用 1s ease-out进行元素过渡，但当元素过渡从蓝色变为绿色时，则使用 2s linear进行元素过渡。

这可能有助于提高各种 UI 元素的可用性。 例如，如果过渡时间超过三秒或四秒（有点冗长）， 您可以在更短的时间内使元素返回正常的 "关闭" 状态。

您还可以查阅我的个人网站文章，名为 Mimic 'onmouseout' with CSS3 Transitions，其中讨论了此概念。

几乎无限延迟

另一项有关过渡的技巧是使用无限延迟模拟永久状态更改，并且无需使用 JavaScript。

该代码如下所示：

在此案例中， 我使用 :active 状态更改元素的宽度和高度。 开启状态的过渡持续时间为 2 秒钟。然而，该元素过渡回到原始尺寸 (100×100) 出现的延迟持续时间为 999999s 和 0s。 但是，其持续时间无关紧要，因为基本上网页时间延迟无上限，相当于 12 天！

这意味着关闭状态 （或者触发 :active 状态前的原始元素状态） 永远不会出现，除非用户等待长达 12 天。因此，结果是 :active 状态变为永久性状态，从而使人产生 JavaScript 改变元素样式的错觉。

Joel Besada 在他的博客文章 Maintaining CSS Style States using “Infinite” Transition Delays中对此项技术进行了介绍。

通过硬件加速使过渡更加流畅

有时，基于 CSS 的动画并没有您所期待的那样流畅。 有时，动画元素会在播放动画后留下 "痕迹" 。 这通常是一个 WebKit 问题，在基于 iOS 的设备上尤为引人注目。 您可以通过支持硬件加速来提高 WebKit 的过渡性能。 下面是一个采用 -webkit- 前缀的简单过渡：

此示例将该元素的宽度和高度从 200×200 过渡到 300×300。 在 Chrome 浏览中，这将会导致滞后痕迹，如图 1 所示。

为解决此问题，您必须通过添加一行 CSS 代码来启用硬件加速。 下面显示了更正后的代码：

新代码行向 transform 属性添加了 translateZ() 函数。 该函数本身通常用于 "转换" 或定位 Z 轴（在 3D 空间中）上的元素，但零值会妨碍任何实际重新定位。 此函数的好处在于带有硬件加速的元素过渡，它能够简化过渡并消除痕迹或条纹，但零值不会重新定位该元素。

当您发现过渡导致元素在开始进行动态模拟之前便闪烁或闪光，该函数也能派上用场。 有关硬件加速的更多信息，请参阅 HTML5 Rocks 网站上 Improving the Performance of Your HTML5 App 一文的 Visual Fidelity++with HTML5: Hardware Acceleration 部分。

就整体而言，CSS3 过渡的浏览器支持十分不错。 所有浏览器现均支持带有前缀或不带前缀的过渡。 未来的浏览器（Internet Explorer 10、Firefox 16 和 Opera 12.5）均支持不带前缀的过渡，而旧版浏览器（比如 Chrome 和 Safari）则支持采用其各自供应商前缀的过渡。 唯数不多得到大量使用但不支持过渡的浏览器是 Internet Explorer 6 至 9 和 Firefox 3.6。 有关支持和前缀使用的详细分析，请参阅以下参考信息：何时 可以使用... 桌面和移动浏览器中支持的 HTML5、CSS3 和 SVG 等兼容性列表。