CSS过渡与动画

在本单元中，你将学习如何使用 CSS 创建视觉上更具动态效果的网站。

本单元的目标是通过 CSS 创建具有视觉动效的网站。你将学习如何利用过渡和动画为用户提供视觉反馈。

完成本单元后，你将能够：

在 CSS 属性之间使用过渡效果
使用 CSS 创建多步骤动画

CSS 过渡

在网站显示出来之后，页面上各种元素的视觉外观可能因为多种原因发生变化。例如：

将鼠标移到链接上，可能会改变该链接的颜色或样式；
改变浏览器窗口的大小，可能会改变页面的布局；
页面滚动时，一些元素可能会消失，而另一些则出现。

通过使用 CSS 过渡（transitions） ，我们可以控制这些变化是如何发生的。

这些变化被称为状态变化 的一种。CSS 过渡允许我们控制视觉状态变化的时机。我们可以控制以下四个方面：

哪些 CSS 属性参与过渡；
过渡持续的时间；
过渡开始前的延迟时间；
过渡的加速度（即变化的节奏）。

我们将逐一探索这些问题的不同设置，会如何影响动画效果。如果你觉得这些内容听起来有些复杂，不用担心！我们会通过示例来学习每一个部分，并掌握如何将它们组合使用，从而实现令人赏心悦目的视觉体验。

例如：

浏览器中的网页包含一个被样式化为按钮的链接。

目前，当你将鼠标移到按钮上时，它的背景颜色会突然从橙色变为绿色。现在我们来让这个过渡变得更加平滑。

在 style.css 文件中，找到针对 <a> 元素的样式规则，并添加如下声明，使 background-color 属性的变化持续 两秒钟：

css 复制代码

a {
  transition-property: background-color;
  transition-duration: 2s;
}

可以观察到颜色渐变为绿色，整个过程两秒钟

持续时间

要在 CSS 中创建一个简单的过渡效果，必须指定以下四个方面中的两个：

要进行过渡的属性
过渡的持续时间

例如：

css 复制代码

a {
  transition-property: color;
  transition-duration: 1s;
}

} 在上面的示例中， transition-property 声明了要进行过渡的 CSS 属性，这里是文字颜色（color）。 transition-duration 声明了过渡所需的时间，这里是 1 秒。

许多 CSS 属性的状态变化都是可以添加过渡效果的。具体的过渡效果会根据所选的属性而不同。你可以在这篇资源中查看所有可动画的属性列表。

不同的属性会以不同的方式进行过渡，例如：

颜色类属性（如 color 和 background-color）会渐变到新的颜色；

长度类属性（如 font-size、width 和 height）会增长或缩小。

持续时间可以用秒（s）或毫秒（ms）表示，例如 3s、0.75s、500ms。默认值为 0s，也就是瞬时变化，看起来就像没有过渡一样。

在选择持续时间时，建议参考生活中的动作持续时间。例如，人的眨眼大约需要 400 毫秒（400ms），因此按钮点击的动画也应该与眨眼一样迅速，这样更符合人的预期体验。

计时函数

计时函数（Timing Function）

下一个过渡属性是 transition-timing-function。

计时函数用于描述整个过渡持续时间中的变化节奏（即速度的变化方式）。

默认值是 ease，它的表现是：开始时慢，中间加速，结束时又慢下来。

其他常见的有效值包括：

ease-in ------ 开始时慢，迅速加速，到结尾突然停止
ease-out ------ 开始时突然变化，逐渐减速，最后缓慢结束
ease-in-out ------ 开始时慢，中间加快，最后慢慢结束
linear ------ 从头到尾速度一致

例如：

css 复制代码

transition-property: color;
transition-duration: 1s;
transition-timing-function: ease-out;

在上述示例中，文字颜色会在 1 秒内发生变化，使用 ease-out 的计时函数，这表示动画会快速开始，然后慢慢结束。

延迟（Delay）

我们要介绍的最后一个过渡属性是 transition-delay。

它的作用和 transition-duration 类似，值也是一个时间单位 。
transition-delay 用来指定 在过渡开始前要等待多长时间 。

如果不设置，默认值是 0s，也就是说没有延迟，动画立刻开始。

css 复制代码

transition-property: width;
transition-duration: 750ms;
transition-delay: 250ms;

在上面的例子中，元素的 width（宽度）属性在发生变化时，会延迟 250 毫秒才开始过渡 ，然后用 750 毫秒完成这个动画过程。

简写

现在我们已经了解了每一个过渡相关的属性，你可能会发现很多 CSS 规则会像下面这样重复出现：

css 复制代码

transition-property: color;
transition-duration: 1.5s;
transition-timing-function: linear;
transition-delay: 0.5s;

由于这四个属性经常一起使用，CSS 提供了一个简写属性 ，可以将它们合并写在一行里：transition。

这个简写属性允许你用一条声明定义所有过渡细节。

通常的顺序是：
transition-property → transition-duration → transition-timing-function → transition-delay

请注意：

两个时间值（duration 和 delay）的顺序是严格的 ，transition-duration 必须在前，transition-delay 在后。
其他属性的顺序可能稍微灵活，但遵循这个常规顺序可以提高可读性和一致性。

比如下面这个写法：

css 复制代码

transition: color 1.5s linear 0.5s;

它等价于前面那四行代码：

任何颜色变化将会在 1.5 秒内以线性速度完成 ，并且在开始前延迟 0.5 秒。

如果你省略了某个属性，就会使用默认值。
注意例外：如果你想设置 transition-delay，就必须先设置 transition-duration，因为浏览器总是会把它遇到的第一个时间值当作持续时间（duration）。

集合

transition 简写规则相比于单独写多条 transition-<property> 的好处之一是：你可以为多个属性指定不同的过渡效果，并将它们组合起来。

要组合多个过渡效果，只需要在语句末尾的分号 ; 前加一个逗号 , 。在逗号后面使用同样的简写语法即可。例如：

css 复制代码

transition: color 1s linear,
            font-size 750ms ease-in 100ms;

上面的代码表示同时对两个属性应用过渡动画：

color 在 1 秒 内以 线性速度 过渡；
font-size 在 750 毫秒 内，以 ease-in 的方式过渡，延迟 100 毫秒后开始。

这种"链式写法"是用来描述复杂动画效果的强大工具。

一个按钮的过渡处理：

css 复制代码

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);

/* Main Styles */
body {
  min-width: 300px;
  background-color: #ecf0f1;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

.button {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  overflow: hidden;
  margin: auto;
  border-radius: 5px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
  width: 300px;
  height: 100px;
  line-height: 100px;
  background-color: #34B3A0;
  color: #fff;
}

.button span,
.button .icon {
  position: absolute;
  display: block;
  height: 100%;
  text-align: center;
}

.button span {
  width: 72%;
  left: 0px;
  line-height: inherit;
  font-size: 22px;
}

.button .icon {
  right: 0;
  width: 28%;
}

.button .icon .fa {
  font-size: 30px;
  vertical-align: middle;
}

.icon {
  width: 200px;
  background-color: #1A7B72;
}

.button:hover span {
  left: -72%;
}

.button:hover .icon {
  width: 100%;
}

.button:hover .icon .fa {
  font-size: 45px;
}

.button span,
.button div,
.button i {
  transition: width 750ms ease-in 200ms,
              left 500ms ease-out 450ms,
              font-size 950ms linear 0ms;
}

all

即使使用简写属性，为许多属性设置过渡依然可能很繁琐。在很多情况下，多个属性会使用相同的持续时间、过渡函数和延迟。这种情况下，你可以将 transition-property 的值设置为 all。这会对所有属性应用相同的过渡设置。

也就是说，使用 all 作为 transition-property 的值，就能让所有发生变化的属性以相同方式进行过渡。你可以将 all 与单独的过渡属性一起使用，也可以搭配简写语法使用。这允许你用一行代码描述多个属性的过渡效果：

css 复制代码

transition: all 1.5s linear 0.5s;

在这个示例中，任何属性的变化都将在半秒延迟后，以线性的方式在 1.5 秒内进行动画过渡。