过渡简介

让我们了解 CSS 中动画和过渡效果的工作原理。

CSS 过渡简介

我们先在 HTML 页面中添加一个按钮：

1<button>
2 测试按钮
3</button>

同时，为按钮添加一些 CSS 样式：

1button {
2  padding: 10px 20px;
3  background: tomato;
4  border: none;
5  border-radius: 5px;
6  font-size: 20px;
7  color: white;
8}

我们如何给用户一个视觉提示，表明他们正在悬停于该按钮之上？

一种常见做法是，在按钮的 CSS 声明中加入小手带手指的光标图标（即 pointer）：

1button {
2  /* 省略部分代码 ... */
3  cursor: pointer;
4}

cursor: pointer 表示当鼠标悬停在按钮上时，光标将变为指向的手形图标。

实际上，我们为按钮定义了一种特殊行为。

这种特殊行为仅在鼠标悬停于按钮上时发生，也就是按钮处于某种特殊状态；这种状态被称为 悬停状态。

因此，我们成功地在按钮悬停时改变了鼠标光标的外观。隐含地，我们把 cursor CSS 属性的值从 default 变成了 pointer。

接下来，我们还可以通过 CSS 过渡，在按钮处于悬停状态时，改变其他 CSS 属性的值。

CSS 过渡

CSS 过渡 是指当 HTML 元素进入某种特殊状态时，其 CSS 属性值逐渐发生变化的过程。

在我们的例子中，这种特殊状态就是悬停状态。我们可以使用 :hover 伪类来针对这一特定状态，如下所示：

1button:hover {
2  background: plum;
3}

上述代码的意思是：当按钮被悬停时，将其背景色改为紫罗兰色。

然而，上面的代码存在一个小问题。

颜色变化是突然发生的，就像有人瞬间打开了开关一样。

我们真正想要的效果是让变化缓慢进行，使过渡看起来更自然。

我们可以通过 transition 属性来实现这一点：

1button {
2  /* 省略部分代码 ... */
3  transition: background 1s;
4}
5button:hover {
6  background: plum;
7}

在同一个 HTML 元素上添加两个过渡效果

在下面的例子中，我们将为按钮添加另一个过渡效果。

HTML 几乎相同：

1<button type="submit">
2 悬停时的两次过渡
3</button>

CSS 也类似：

1button {
2  padding: 10px 20px;
3  background: tomato;
4  border: none;
5  border-radius: 5px;
6  font-size: 20px;
7  color: white;
8  cursor: pointer;
9  transition: background 1s, font-size 2s;
10}
11button:hover {
12  background: orange;
13  font-size: 30px;
14}

注意以上代码的最后六行。

这六行正是我们变化的核心：

1. 我们在 transition 属性中列出需要过渡的多个 CSS 属性，每个属性后紧跟过渡持续时间。
2. 在 button:hover 的 CSS 声明中，我们定义了过渡的最终状态。

在 button:hover 选择器中，我们明确设置了按钮过渡的结束状态。只要某个属性出现在 button:hover 中，并且也在 button 的 transition 声明中列出，它就会参与过渡。

关于 CSS 过渡还有更多内容可以学习。例如，我们不必逐个列出要过渡的属性，可以直接使用通配关键字 all：

1transition: all 1s;