第19章　CSS过渡

在网页和APP中，状态的变化会对用户使用界面的感受产生很大的影响。如果变化太快，交互会显得很不自然；如果变化太慢，哪怕只有几毫秒，界面就会显得有些呆板和生硬。

当我们将一个链接改成按钮形式时，我们往往会通过改变它的背景色来改变鼠标悬停状态时的外观。

.btn { 
background-color : #bc676c; } 

.btn:hover { 
background-color : #a7494f; }

默认情况下，这些样式变化是即时的，但通过使用CSS过渡，我们可以让变化在特定的时间长度内发生，并可以控制变化的速度和延迟。

.btn { 
transition-property : background-color; }

我们可以通过动态伪类选择器来触发CSS过渡，例如:hover、:focus、 :active 和 :target。首先，要确认哪个或哪些属性需要过渡。在我们这个按钮上，只需要过渡它的背景色，因此我们这样来使用transition-property。

.btn { 
transition-property : background-color; 
transition-duration : .25s; }

过渡持续时间

过渡属性可以在任意几秒（s）或毫秒（ms）内改变一个或多个样式。到目前为止，这些时间单位只被用于听觉样式表中。如果需要在四分之一秒（.25s）内完成平滑的过渡，我们为过渡添加0.25秒（.25s）的持续时间。

.btn { transition-duration : .25s; }

如果把持续时间设置为0，或者忽略了这个属性，那么状态将会立刻发生改变，不会有任何过渡。

注意我们是如何把过渡声明添加到要过渡的元素上，而不是元素的其他状态例如:hover状态上。

.btn { 
transition-property : #a7494f; }

通过此处的声明，按钮的背景色将会在四分之一秒（.25s）的时间内平滑地在红色的两种色调之间过渡。

我们可以把过渡应用到任何块级或文本元素，以及:before和:after等伪元素上。

组合过渡

当我们有两个或多个属性需要过渡——例如，背景色和文本颜色——那么可以将每个属性用逗号分隔。

.btn { 
background-color : #bc676c; 
color : #fff; 
transition-property : background-color, color; }

或者，我们可以利用all关键字把多个属性组合到一个声明中。

.btn { 
transition-property : all; }

延迟过渡

在现实世界中，我们与之交互的许多对象并不是在按下按钮或触发时立即开始变化。默认情况下，CSS过渡从它们启动的那一刻开始，我们称之为零点。我们可以通过在零点和过渡开始之间增加延迟来实现物理真实感。指定若干毫秒（ms）或若干秒（s）的延迟时间。

.btn { 
transition-property : background-color; 
transition-duration : .25s; 
transition-delay : .1s; }

从零点到背景颜色变化开始之间，我们只添加0.1秒（.1s）的延迟，当属性返回到原始状态时也会应用同样的延迟。

加速过渡

加速取决于我们选择的transition-timing-function属性值。例如，线性过渡linear将会在整个过渡过程中保持恒定速度，而ease过渡将会在样式变化过程中逐渐减慢。另外还有三个关键字可以进一步变化过渡的速度，如下所示。

我们在按钮上指定一个线性linear过渡。

.btn { 
transition-property : background-color; 
transition-duration : .25s; 
transition-delay : .1s; 
transition-timing-function : linear; }

W3C的CSS3过渡模块还包括沿一个自定义的贝塞尔曲线绘制transition-timing-function的能力。用数学方法来定时是很有趣的，但超出了本书的介绍范围。

应用多个过渡

当需要过渡两个或多个属性的时候，我们可以将它们组合成一个由逗号分隔的列表，然后分别为每一个指定持续时间、延时和时间函数的值。首先，我们把多个过渡用常规的方式写出来。

.btn { 
transition-property : background-color, color; 
transition-duration : .25s, .25s; 
transition-delay : .1s, .1s; 
transition-timing-function : linear, linear; }

多个过渡的持续时间、延迟或时间函数值是相同的，那么我们只需要把这些值写一次。

.btn { 
transition-property : background-color, color; 
transition-duration : .25s; 
transition-delay : .1s; 
transition-timing-function : linear; }

我们也可以把这些值组合成一个由逗号分隔的字符串。

.btn { 
transition : background-color .25s .1s linear, color .25s .1s  
linear; }

当我们需要几个过渡按次序来执行时，可以为每个过渡指定不同的延迟时间。