使用CSS3过渡：完全指南-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 所示。

图 1. 过渡期间 Chrome 中的滞后痕迹

为解决此问题，您必须通过添加一行 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 HTML***pp 一文的 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 等兼容性列表。

下一步阅读方向

希望本文对您理解 CSS3 过渡及语法细节有所帮助，也希望它提供的技巧和技术对您有所帮助。

有关 CSS3 过渡的更多读物，请查看以下任一资源：