使用 CSS3 过渡: 完全指南

时间:2014-12-29

 

如果您已经阅读了最新的 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 中的滞后痕迹
图 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 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 等兼容性列表。

上一篇:CSS3前端开发中需要用到的变换矩阵 下一篇:CSS3 box-shadow兼容loading效果兼IE10+ CSS Hack介绍

相关文章

最新文章