使用 CSS3 过渡： 完全指南
如果您已经阅读了最新的 CSS 相关技术和技巧，那么毫无疑问，您可能已经读过一些涉及 CSS3 过渡主题的文章、博客文章和教程，这有助于您在一定期限内顺利实现 CSS3 的价值。介绍 CSS3 过渡 的 W3C 规范的模块现已接近候选推荐状态，这意味着该项 CSS3 技术现已成为许多现代 CSS 开发人员工具箱中的主要技术。
本文将深入介绍 CSS3 过渡。 希望您在读过这篇文章之后，能够对 CSS3 过渡具有更加全面的理解，同时还提供了一些实用技巧和技术，帮助您在新项目中实现此功能。
过渡语法
过渡语法通常以简化形式表达，出于简洁性和便于维护，强烈建议这样做。 我稍后会在本节中对此进行详细说明，但现在，我要介绍一个采用普通书写符号的简单过渡示例：
.example { transition-property: background-color; transition-duration: 2s; transition-timing-function: ease-in; transition-delay: 1s; }
注意，为简洁起见，本文展示的所有代码示例均未提供供应商前缀。 使用代码时，请务必确保在使用过渡的情况下纳入所有必要的前缀，并始终在末尾提供不带前缀的标准规则。
下面是上述示例的分解结构。
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
属性指定过渡开始前出现的延迟。 也就是说，在触发过渡后，延迟代表发生任何过渡前流逝的时间。 您可以指定秒数或毫秒数。 负值同样有效，因为这可能导致中途开始进行过渡（有效扭转了延迟）。
过渡简写
如上所述，您可以将所有这些属性指定为单一速记声明的一部分。 因此，您可以将上面的示例表达如下：
.example { transition: background-color 2s ease-in 1s; }
时间相关值的顺序至关重要。 第一个时间值始终代表持续时间，因此如果您希望纳入延迟，则必须首先定义持续时间。
多项过渡
您可以使用上面讨论的 transition-property 普通书写语法，用逗号分隔要过渡的各个属性，从而声明多项过渡。 反过来，其他普通书写值允许包含逗号分隔值，使其对应于 transition-property 值。
然而，简写语法进一步简化了此操作，能够同时声明多项属性过渡。 为此，您只需用逗号分隔声明，如下所示：
.example { transition: background-color 2s ease-in 1s, width 2s ease-in-out, height 3s ease-out; }
如果您愿意，可以在一行上显示多个属性，或者为提高可读性将各过渡声明各占一行，如上面的示例所示。
触发过渡
既然您已经很好地掌握了 CSS3 过渡语法，那么应当如何实际触发过渡呢？ 上面所述的示例定义了过渡操作的各个层面，但却并没有指定触发过渡的时间和方法。 因此，就目前的状况而言，单纯通过代码不会触发任何操作。
开发人员最常用的过渡触发方法是使用 :hover 伪类。 因此， 加上 :hover 触发器后，代码可能如下所示：
.example { background-color: green; transition: background-color 2s ease-in 1s; } .example:hover { background-color: blue }
有了这个代码，如果用户将鼠标悬停在该元素之上，背景颜色会在经过一秒钟的初始延迟后，于两秒钟内动态地从绿色变为蓝色。
:hover 触发器以外的事件触发的过渡
事实上，触发过渡与触发器 (在上述情况下，触发器为 :hover)本身没有太大关系。 实际触发过渡的是元素状态变化。
在上面的示例中，状态变化是指从绿色背景颜色变为蓝色背景颜色。 凑巧的是，状态变化作为:hover 事件的结果发生。
为说明这与触发过渡的实际事件毫无关联，也为强调状态变化的重要性，下面提供了一些触发过渡的其他方法。
使用 :active
:active 伪类表示用户单击某个元素并按住鼠标按钮时显示的状态。该代码如下所示：
.example { width: 200px; height: 200px; transition: width 2s ease-in; } .example:active { width: 400px; }
在这个示例中，当用户单击并按住元素时，发生宽度属性过渡，因此该元素保持 "活动" 状态。
使用 :focus
:focus 伪类通常会在元素接收键盘关注时出现。该代码如下所示：
input { width: 200px; transition: width 2s ease-in; } input:focus { width: 250px; }
在这种情况下，窗体输入元素上将会发生过渡，且该字段接收关注时会执行窗体输入元素宽度过渡
此处作为一个边点，如有可能，当对 :hover 伪类应用过渡时，最好将 :focus 添加至您的选择器堆栈。 这样，将能够丰富鼠标用户和键盘用户的体验。
使用 :checked
:checked 伪类。 为在发生这种状况时触发过渡，您需要执行以下代码：
input[type="checkbox"] { transition: width 1s ease; } input[type="checkbox"]:checked { width: 30px; }
在这种情况下，虽然宽度变化不会实际为复选框本身带来任何可见差别，但仍会显得凹陷，因为窗体字段所占的空间将增大。
使用媒体查询
触发元素状态变化的另一种方法是使用 CSS3 媒体查询。 如果您学习过媒体查询，那么一定知道它能够让您根据某些元素(比如设备宽度和方向)更改应用于元素的样式。 媒体查询过渡可能如下所示：
.example { width: 200px; height: 200px; transition: width 2s ease, height 2s ease; } @media only screen and (max-width : 960px) { .example { width: 100px; height: 100px; } }
在这个示例中，该元素的宽度和高度为 200px × 200px。 但是，如果用户将自己的窗口大小调整到 960px 或以下，则元素将过渡为更小的尺寸： 100px × 100px。 当窗口超过 960px 的阈值后，将会发生过渡。
当然，如果网页加载时用户的窗口大小是 960px 或以下，浏览器会在该部分应用这些样式，但是由于不会出现状态变化，因此不会发生过渡。
正如您在上面的示例中所见，您基本上可以通过在某种程度上更改元素 CSS 的任何事件触发过渡。 因此，只要更改的属性是动画属性，就会发生过渡。
通过 JavaScript 触发的过渡
在这一点上，您可能已经理解： 如果您可以通过基于 CSS 的状态更改触发过渡，那么自然可以通过 JavaScript 做到这一点。
在下面的示例中，当使用纯粹的 CSS 示例时同样也会发生过渡，也就是说，它是 CSS 状态变化的结果，但是，这一次是通过 JavaScript 触发的过渡。
下面的示例使用简单的 jQuery 脚本切换元素类名称：
$(function() { $("#button").click(function() { $(".box").toggleClass("style-change"); }); });
假设您的标记中具有包含 box 类的元素和 button 元素 ID，则每次用户单击 #button 元素时，此脚本都会将 style-change 类切换为 box。
尽管其本身没有任何作用。 您可以向 style-change 类添加过渡，这样，每次添加或删除类时，在两个声明块中指定的值之间来回进行宽度和高度 过渡，如下所示：
.box { width: 200px; height: 200px; transition: width 2s ease, height 2s ease; } .style-change { width: 300px; height: 300px; }
同样，此代码段重点强调样式发生变化导致过渡的点，您可以通过任意数量的方法触发这些更改，包括通过 JavaScript.
这是在考虑是否要使用 CSS 过渡替换 JavaScript 时需要牢记的重要一点。 我发现一条需要牢记的有效规则，即事件通常应当通过 JavaScript 触发，简单动画或过渡则应使用 CSS 触发。 当然，这只是一般性的指导原则，不一定是最佳选择，具体应视条件而定。
过渡技巧和技术
现在，您已经对过渡语法及其使用方式有了很好的掌握，我将会介绍几项小技巧，您或许会在某个项目中派上用场。
开关状态的不同过渡方式
此刻，在测试完某些示例后，您可能已经注意到，过渡时通常会进入"开启" 状态，并且随后会回到最初的 "关闭" 状态。 但是，还有一种方式定义其他开关状态过渡方式。
在下面的代码示例中，开关状态均会导致背景颜色的过渡：
.example { width: 100px; height: 100px; background-color: blue; transition: background-color 2s linear; } .example:hover { background-color: green; }
让我们来改一下关闭状态的持续时间和计时函数，如下所示：
.example { width: 100px; height: 100px; background-color: blue; transition: background-color 1s ease-out; } .example:hover { background-color: green; transition: background-color 2s linear; }
在这段代码中，我将最初的过渡声明转为 :hover 状态，并在触发 :hover前向元素应用的样式添加了一行新代码。 现在，"开启" 过渡需要两秒钟 （指定为 2s linear）， and the "关闭" 过渡需要一秒钟 （指定为 1s ease-out）。
这个想法的关键在于，指定浏览器当元素过渡从绿色变为蓝色时，使用 1s ease-out进行元素过渡，但当元素过渡从蓝色变为绿色时，则使用 2s linear进行元素过渡。
这可能有助于提高各种 UI 元素的可用性。 例如，如果过渡时间超过三秒或四秒（有点冗长）， 您可以在更短的时间内使元素返回正常的 "关闭" 状态。
您还可以查阅我的个人网站文章，名为 Mimic 'onmouseout' with CSS3 Transitions，其中讨论了此概念。
几乎无限延迟
另一项有关过渡的技巧是使用无限延迟模拟永久状态更改，并且无需使用 JavaScript。
该代码如下所示：
.example { width: 100px; height: 100px; background-color: blue; transition: width 0s ease-out 999999s, height 0s ease-out 999999s; } .example:active { width: 200px; height: 200px; transition: width 2s, height 2s; }
在此案例中， 我使用 :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- 前缀的简单过渡：
.example { width: 200px; height: 200px; -webkit-transition: width 2s ease, height 2s ease; } .example:hover { width: 300px; height: 300px; }
此示例将该元素的宽度和高度从 200×200 过渡到 300×300。 在 Chrome 浏览中，这将会导致滞后痕迹，如图 1 所示。
为解决此问题，您必须通过添加一行 CSS 代码来启用硬件加速。 下面显示了更正后的代码：
.example { width: 200px; height: 200px; -webkit-transition: width 2s ease, height 2s ease; -webkit-transform: translateZ(0); } .example:hover { width: 300px; height: 300px; }
新代码行向 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 等兼容性列表。
