Question

我们在给超链接设置样式时，一般都会设置一个悬停状态（hover）的效果，这种方法能明显地提醒用户他的鼠标指向的是一个超链接。虽然对越来越多的触摸屏设备没太大用处，但不管怎么说，这种方法对网站和用户之间的交互是非常简单实用的。

通常，使用CSS时悬停状态就是一个开关。它默认有一个状态，然后在鼠标悬停时马上切换到另一种状态。但是使用CSS3过渡，正如其名字所暗示的，可以让元素从一种状态慢慢转换到另一种状态。这种转换并不局限于悬停状态，但可以从悬停讲起。

在上一章中，我们使用CSS3制作了一个有红色渐变背景的按钮。所使用的CSS3代码如下（为简洁起见省略了浏览器私有前缀）：

我们来给按钮增加一个悬停效果：

两种状态下的效果如下，先看默认状态：

再看悬停状态：

这里只是在鼠标悬停时简单地修改了一下文字、文字阴影以及边框的颜色。所以，你可能想象出来，使用这段CSS代码，当鼠标悬停在按钮上面时，按钮会直接从第一种状态（白色文字）突变到第二种状态（黑色文字）——就是一个开关效果。我们来给第一段CSS规则添加一点CSS3魔法：

现在再把鼠标悬停在按钮上，文字、文字阴影和边框阴影的颜色都会从第一种状态平滑过渡到第二种状态。注意，这里把过渡应用到了元素而不是悬停状态上。这样做是为了让元素的其他状态（如：active）也能设置不同的样式并拥有类似的效果。所以请记住，过渡声明要放在过渡效果开始的元素上。那过渡是怎么发生的呢？

7.1.1　过渡相关的属性

CSS3过渡效果涉及四个属性，也可以使用包含这四个属性的缩写。

transition-property：要过渡的CSS属性名称（比如background-color、text-shadow或者all，使用all则过渡会被应用到每一个可能的CSS属性上）；

transition-duration：定义过渡效果持续的时间（时间单位为秒，比如.3s、2s或1.5s）；

transition-timing-function：定义过渡期间速度如何变化（比如ease、linear、ease-in、ease-out、ease-in-out或cubic-bezier）；

transition-delay：可选，用于定义过渡开始前的延迟时间。相反，将该值设置为一个负数，可以让过渡效果立即开始，但过渡旅程则会从半路开始。

单独使用各种过渡属性创建转换效果的语法如下：

1. 过渡的简写语法

正如我们之前所见过的那样，我们可以将单个的声明组合成一个简写版：

使用简写语法时要注意，声明中的第一个时间值总被应用给transition-duration，第二个时间值总被应用给transition-delay。

和以前一样，别忘了浏览器私有前缀。例如，上面那句简写声明添加了浏览器私有前缀之后，代码如下：

我们将没有前缀的标准版本放在了最后面，这样当浏览器完全实现了标准之后，这句代码就会覆盖之前带前缀的版本。

过渡的局限性

使用过渡时有一点需要说明，即有些属性无法实现过渡，尽管规范上说它应该可以（即使在最新的工作草案http://dev.w3.org/csswg/css3-transitions/中也这么说）。例如，background-gradient属性就无法过渡。但理论上所有CSS属性都是可以过渡的（http://www.w3.org/TR/css3-transitions/#properties-from-css-）。

2. 在不同时间段内过渡不同属性

当一条规则要实现多个属性过渡时，这些属性不必步调一致。看看下面这段代码：

此处我们通过transition-property来指定只过渡border、color和text-shadow，然后在transition-duration声明中我们设定边框过渡效果应该2秒内完成，文字颜色3秒，文字阴影8秒。由逗号分隔的过渡持续时间按顺序对应上面的CSS属性。

3. 理解过渡调速函数

大多数过渡属性都能一看就知道是什么意思。前面其实已经介绍了过渡相关的几个CSS属性。其中，过渡持续时间和延迟时间都是以秒为单位的时间值（如2s），所以也很好理解。但过渡调速函数又有点让人摸不着头脑了。ease、linear、ease-in、ease-out、ease-in-out以及 cubic-bezier这些东西都是做什么用的？它们其实都是某种贝塞尔曲线，本质上就是缓动函数。我估计这样讲你还是不太明白。这样说吧……嗯，这其实就是那种用文字很难表达的概念（当然本人有很好的文字驾驭能力），就像你不得不给你的另一半解释清楚为什么你忘记了她的生日一样！所以我就不白费口舌了，还是请读者直接看这里吧http://cubic-bezier.com/。

这个网站能让你对比查看各种调速函数，看到它们的区别。不过，即使你闭着眼睛都能写出贝塞尔曲线（而且作为老外还能用中国话从1000倒数到1），在实际使用中，它们的效果也确确实实没有太大区别。为什么呢？

和任何增强效果一样，使用过渡效果也必须长个心眼儿。在现实当中，如果过渡效果持续的时间过长，会让网站感觉很慢。导航链接用整整5秒时间完成过渡，只会让你的用户骂娘而不是赞叹。因此，除非有什么特殊的理由，否则使用快速（以我的经验最多1s）的默认过渡（ease）效果往往最好。

7.1.2　响应式网站中的有趣过渡

一旦变成响应式设计的发烧友，你就会发现自己在浏览网页时总要调整一下浏览器窗口大小，以此确认该网站是不是响应式的。但这种习惯可能会激怒“普通”人，所以最好私下里做这件事。

我经常访问的一个讨论CSS技术的好网站是Chris Coyier的http://css-tricks.com。在它重新设计之后，我浏览时碰巧调整了浏览器窗口，在看到众多元素在屏幕上飞舞时，我露出了会心的微笑。Chri给网页施了什么魔法使其具有了这种效果？其实代码如下⁽¹⁾：

此处，我们使用CSS通配选择器*来选择页面所有元素，然后为所有元素都设置一个耗时1秒的过渡效果。声明中省略了过渡调速函数，浏览器默认会使用ease；声明中同样省略了延迟时间，浏览器默认使用none，所以过渡效果不会有延迟。最终效果是什么样？大多数效果（超链接、悬停状态，等等）和你所期望的一样。不过，因为所有元素都被应用了过渡，自然也就包括媒体查询中的规则，所以当浏览器窗口大小发生变化时，页面元素将从一种排列方式过渡为另外一种排列方式。必须这么做吗？当然不是！但这种效果是不是既好看又好玩？没错！