如果您阅读了与CSS相关的最佳技术和技巧，那么您无疑已经阅读了一些涵盖CSS3过渡主题的有用文章、博客文章和教程。你可以在一定时间内成功实现CSS3的价值。描述CSS3转换的W3C规范模块现在接近候选推荐状态，这意味着这种CSS3技术现在是许多现代CSS开发人员工具箱中的主要内容。本文深入探讨了CSS3过渡。我希望阅读本文后，您对CSS3转换有更全面的了解，并获得一些实用技巧和技巧来帮助您在新项目中实现此功能。过渡语法过渡语法通常以简化形式表示，强烈建议使用这种形式以实现简洁和易于维护。我将在本节后面对此进行详细说明，但现在，我将展示一个简单的转换示例，使用简单的书写符号：.example{transition-property:background-color;过渡持续时间：2s；过渡计时功能：缓入；转换延迟：1s；请注意，为简洁起见，本文中显示的所有代码示例都没有供应商前缀。使用代码时，请确保在使用转换的地方包含所有必要的前缀，并始终提供末尾没有前缀的标准规则。以下是上述示例的细分。transition-propertytransition-property行定义要动态转换或模拟的CSS属性。该属性的值可以是任何要动态模拟的属性，只要它是动画属性即可。默认为无，这意味着没有属性转换；类似地，如果您指定一个值all，则所有动画属性都将应用于元素转换。transition-durationtransition-duration属性指定完成转换需要多长时间。即，从过渡开始到结束的持续时间。在元素转换回其原始状态后，将重复显示转换。您可以以秒（数字后跟单位“s”）或毫秒（“ms”）为单位指定持续时间。默认值为0s。transition-timing-functiontransition-timing-function属性指定了一些引用过渡“缓动函数”的东西。此属性指定浏览器转换的速度以及操作在转换过程中的进展方式。您可以将值指定为预定义函数、阶跃函数或三次贝塞尔曲线。默认是轻松。其他预定义值包括linear、ease-in、ease-out、ease-in-out。有关阶跃函数和Bézier曲线的更多信息，请参阅transition-timing-function属性规范。在大多数情况下，很难区分定时函数，除非转换持续时间超过一两秒。transition-delay属性指定在转换开始之前发生的延迟。也就是说，在触发转换后，延迟表示在发生任何转换之前经过的时间。您可以指定秒或毫秒。负值也是有效的，因为这会导致过渡在中途开始（有效地反转延迟）。转换速记如上所述，您可以将所有这些属性指定为单个速记声明的一部分。所以你可以这样表达上面的例子：.example{transition:background-color2sease-in1s;时间相关值的顺序很重要。第一个时间值始终表示一个持续时间，因此如果您希望合并延迟，则必须首先定义一个持续时间。多重转换您可以使用上面讨论的转换属性的正常书面语法声明多个转换，用逗号分隔要转换的属性。反过来，允许其他明文值包含逗号分隔值，使它们对应于transition-property值。然而，速记语法进一步简化了这一点，允许同时声明多个属性转换。为此，您只需用逗号分隔声明，如下所示：如果愿意，您可以在一行中显示多个属性，或者将每个转换声明放在其自己的行中以提高可读性，如上例所示。触发过渡既然您已经很好地掌握了CSS3过渡语法，那么如何实际触发过渡呢？上面描述的示例定义了转换的各个方面，但没有指定何时以及如何触发转换。因此，就目前而言，纯代码不会触发任何事情。开发人员触发转换的最常见方法是使用:hover伪类。因此，使用:hover触发器，代码可能如下所示：.example{background-color:green;过渡：背景颜色2sease-in1s；}.example:hover{background-color:blue}使用此代码，如果用户将鼠标悬停在元素上，背景颜色会在初始延迟一秒后的两秒内动态地从绿色变为蓝色。由:hover触发器以外的事件触发的过渡实际上，触发过渡与触发器（在上述情况下为:hover）本身关系不大。真正触发转换的是元素状态的改变。在上面的示例中，状态变化是从绿色背景颜色变为蓝色背景颜色。碰巧的是，状态更改是:hover事件的结果。为了说明这与触发转换的实际事件无关，并强调状态更改的重要性，这里有一些触发转换的替代方法。使用:active:active伪类来表示用户单击元素并按住鼠标按钮时显示的状态。代码如下所示：.example{width:200px;高度：200px；过渡：width2sease-in；}.example:active{宽度:400px;在此示例中，当用户单击并按住元素时，宽度属性会发生变化，因此元素保持“活动状态”。使用:focus:focus伪类通常发生在元素接收键盘焦点时。代码如下所示：input{width:200px;过渡：width2sease-in；}input:focus{宽度:250px;在这种情况下，将在表单输入元素上发生转换，并且当字段接收焦点时表单输入元素宽度转换在这里作为边缘点执行，***在将转换应用于:hover伪时将:focus添加到您的选择器堆栈-类，如果可能的话。这样，将丰富鼠标用户和键盘用户的体验。使用:checked:checked伪类。为了在发生这种情况时触发转换，您需要实现以下代码：input[type="checkbox"]{transition:width1sease;}input[type="checkbox"]:checked{width:30px;在这种情况下，虽然宽度变化实际上不会对复选框本身产生任何明显的影响，但它仍然会显得凹陷，因为表单字段会占用更多空间。另一种使用媒体查询来触发元素状态变化的方法是使用CSS3媒体查询。如果您曾经研究过媒体查询，您就会知道它们允许您根据某些元素（例如设备宽度和方向）更改应用于元素的样式。媒体查询转换可能如下所示：.example{width:200px;高度：200px；过渡：width2sease，height2sease；}@mediaonlyscreenand(max-width:960px){.example{宽度:100px;高度：100px；在这个例子中，元素的宽度和高度为200pxx200px。但是，如果用户将自己的窗口大小调整为960px或更小，元素将转换为更小的尺寸：100pxx100px。过渡将在窗口超过960px阈值后发生。当然，如果页面加载时用户的窗口大小为960px或更小，浏览器将在该部分应用这些样式，但由于不会发生状态更改，因此不会发生转换。正如您在上面的示例中看到的，您基本上可以从以某种方式更改元素CSS的任何事件触发转换。因此，只要更改的属性是动画属性，就会发生转换。通过JavaScript触发的过渡至此，您可能明白：如果您可以通过基于CSS的状态更改来触发过渡，那么您自然可以通过JavaScript来完成。在下面的示例中，使用纯CSS示例时也会发生转换，即它是CSS状态更改的结果，但这次转换是通过JavaScript触发的。以下示例使用简单的jQuery脚本切换元素类名称：$(function(){$("#button").click(function(){$(".box").toggleClass("style-change");});});假设您的标记中有一个带有框类的元素和一个按钮元素ID，每次用户单击#button元素时，此脚本都会将样式更改类切换为框。虽然它本身并没有做任何事情。可以在style-change类中添加transitions，这样每次添加或删除一个class时，宽度和高度在两个声明块中指定的值之间来回转换，像这样：.box{width:200px;高度：200px；过渡：width2sease，height2sease；}.style-change{宽度：300px;高度：300px；}同样，此代码段突出了样式更改导致转换的点，您可以通过多种方式触发这些更改，包括通过JavaScript。在考虑是否将JavaScript替换为CSS转换时，这是需要牢记的重要一点。我发现一个很好的规则要记住，事件通常应该通过JavaScript触发，简单的动画或过渡应该使用CSS触发。当然，这只是一般的指导方针，不一定是最好的选择，要视情况而定。过渡技巧和技术现在您已经很好地掌握了过渡语法以及如何使用它，我将介绍一些您可能会发现在项目中有用的技巧。开关状态的不同转换此时，在测试了一些示例之后，您可能已经注意到转换通常会进入“开”状态，然后返回到原始的“关”状态。但是，还有一种方法可以定义其他开关状态转换。在下面的代码示例中，两种开关状态都会导致背景颜色转换：.example{width:100px;高度：100px；背景色：蓝色；过渡：背景色2线性；}.example:hover{背景颜色：绿色；}让我们改变关闭状态的持续时间和计时函数如下：.example{width:100px;高度：100px；背景色：蓝色；过渡：背景色1渐变；}.example:hover{背景色:绿色;过渡：背景色2线性；在这段代码中，我将原始的转换声明变成了:hover状态，并在触发:hover之前向应用于元素的样式添加了一行新代码。现在，“开启”过渡需要两秒（指定为2s线性），“关闭”过渡需要一秒（指定为1s缓出）。这个想法的关键是指定浏览器在元素从绿色过渡到蓝色时对元素过渡使用1s的缓出，但在元素从蓝色过渡到绿色时使用2s线性。这可能有助于提高各种UI元素的可用性。例如，如果转换时间超过三或四秒（有点长），您可以在更短的时间内将元素返回到其正常的“关闭”状态。您还可以查看我的个人网站文章，名为Mimic'onmouseout'withCSS3Transitions，其中讨论了这个概念。近乎无限的延迟转换的另一个技巧是在不使用JavaScript的情况下使用无限延迟来模??拟真实的状态变化。代码如下所示：.example{width:100px;高度：100px；背景色：蓝色；过渡：宽度0sease-out999999s，height0sease-out999999s；}.example:active{宽度:200px;高度：200px；过渡：width2s，height2s；在这种情况下，我使用:active状态来更改元素的宽度和高度。打开状态的转换持续时间为2秒。但是，元素转换回其原始大小(100x100)，延迟持续时间为999999s和0s。但是，它的持续时间是无关紧要的，因为网页延迟时间基本上没有上限，即12天！这意味着关闭状态（或触发:active状态之前的原始元素状态）将永远不会出现，除非用户最多等待12天。因此，结果是:active状态变为永久状态，给人一种JavaScript正在改变元素样式的错觉。JoelBesada在他的博客文章MaintainingCSSStyleStatesusing“Infinite”TransitionDelays中描述了这种技术。使用硬件加速实现更平滑的过渡有时基于CSS的动画并不像您预期??的那样平滑。有时动画元素会在动画播放后留下“痕迹”。这通常是WebKit问题，在基于iOS的设备上尤其明显。您可以通过支持硬件加速来提高WebKit的转换性能。这是一个以-webkit-为前缀的简单过渡：.example{width:200px;高度：200px；-webkit-transition:width2sease,height2sease;}.example:hover{宽度:300px;高度：300px；}这个例子将元素的宽度和高度从200x200过渡到300x300。在Chrome浏览器中，这将导致滞后现象，如图1所示。图1.过渡期间Chrome中的滞后要解决此问题，您必须通过添加一行CSS代码来启用硬件加速。更正后的代码如下所示：.example{width:200px;高度：200px；-webkit-transition:width2sease,height2sease;-webkit-transform:translateZ(0);}.example:hover{宽度:300px;高度：300px；一行新代码将translateZ()函数添加到transform属性。该函数本身通常用于在Z轴上（在3D空间中）“平移”或定位元素，但零值会阻止任何实际的重新定位。此功能的好处是，通过硬件加速的元素过渡，它简化了过渡并消除了条纹或条纹，但零值不会重新定位元素。当您发现过渡导致元素在动态模拟开始之前闪烁或闪烁时，此功能也可以派上用场。有关硬件加速的更多信息，请参阅HTML5Rocks网站上提高HTML性能***pp文章的VisualFidelity++withHTML5：硬件加速部分。浏览器支持和供应商前缀总的来说，浏览器对CSS3转换的支持非常好。所有浏览器现在都支持带或不带前缀的转换。未来的浏览器（InternetExplorer10、Firefox16和Opera12.5）都支持无前缀的转换，而旧的浏览器（例如Chrome和Safari）支持带有各自供应商前缀的转换。唯一不支持转换的频繁使用的浏览器是InternetExplorer6到9和Firefox3.6。详细的支持和前缀使用分析见以下参考资料：WhencanIuse...桌面和移动浏览器支持的HTML5、CSS3、SVG等的兼容性列表。接下来的阅读方向希望这篇文章能帮助你理解CSS3的过渡和语法细节，也希望它提供的技巧和技巧能对你有所帮助。有关CSS3过渡的更多阅读，请查看以下任何资源：W3CCSS过渡规范AListApart：UnderstandingCSS3TransitionsTheImpressiveWeb：CSS3TransitionsWithout:hover24WaystoImpressYourFriends：CrazyCSSTransitionEffectsMozillaDeveloperNetwork：使用CSS过渡
