当前位置：首页 > article >正文

【CSS in Depth 2 精译_088】第五部分：添加动效概述 + 第 15 章：CSS 过渡特效概述 + 15.1：状态间的由此及彼

article 2024/12/23 14:22:55

当前内容所在位置（可进入专栏查看其他译好的章节内容）

第五部分添加动效 ✔️
【第 15 章过渡】 ✔️
15.1 状态间的由此及彼 ✔️
15.2 定时函数

文章目录

第 5 部分添加动效 Adding motion
第 15 章过渡 Transitions
- 15.1 状态间的由此及彼 From here to there

《CSS in Depth》新版封面

《CSS in Depth》新版封面

译者按
终于来到了本书的最后一个部分——动效设置。遥想当初 6 月中旬提笔时完全不曾料到，这本正文仅 500 页的新书真正翻译起来，过程竟是如此艰难曲折。原以为每天至少啃 10 页，这样两个月不到就能完成，毕竟自己看过第一版原著。谁知计划赶不上变化，中途屡屡耽搁，其间也数度想过放弃，也想过换本难度小点的、内容少点的书来啃。但仔细一想，这些问题和困难不正是我进阶 CSS 的拦路虎么？既然要践行长期主义，就不能半途而废，哪怕每天只学一页也是好的。这样才逐渐重拾信心坚持了下来。如果看到这里的朋友也有类似的经历，还请务必摆正心态，戒骄戒躁，一步一个脚印踏踏实实地和我一起学完剩下的内容。毕竟冬至已过，夜尽天明的故事每一天都在上演，每一天都是新的希望！

第 5 部分添加动效 Adding motion

动效（Motion）与动态变化是您为页面样式的润色所做的最后一道工序。页面元素可以淡出（fade out）屏幕；菜单可以滑入（slide in）加载；颜色也可以自由变换（shift）。即便动效平平，这些措施也会让页面交互妙趣横生；但若尽善尽美，动效的意义则远不止于此。在适当的时候恰到好处地引入变化效果，既可以有效地向用户传达特定信息，同时也能将他们的注意力吸引到页面适当的位置。本书最后这几章内容将深入探讨 CSS 中能为页面带来动效的相关知识。

第 15 章过渡 Transitions

本章概要

利用过渡（transitions）为页面引入动效
理解定时函数并选择合适的效果
过渡与 JavaScript 的协同

在传统的打印媒介上，事物都是静止不动的。文字不能在页面上自由挪动，色彩也无法任意变换。但 Web 是个活灵活现的全新媒介，可以实现更多效果。人们可以在页面中添加动效、引入各种变化，而实现它们最简单的方式，就是 过渡（transitions）。

有了 CSS 过渡效果，您就可以让浏览器在某个值发生改变时，将其从原来的某个值平缓过渡（ease）到另一个值。例如某个悬停状态下为红色的蓝色链接，如果使用了过渡特效，当用户划过该元素时，链接就会从蓝色先过渡到紫色、再由紫色过渡到红色；而当鼠标移走时再恢复如初。如果正确使用，过渡可以进一步增强页面的交互效果，并且由于我们的眼睛更容易被动态的事物所吸引，所以当变化产生时可以更好地获得用户关注。

通常，给页面添加过渡效果是不怎么费劲的。本章会介绍如何实现 CSS 过渡以及其间需要考虑的相关问题。有些案例可能会比较复杂，因此我们也会不同的情况进行考察。

15.1 状态间的由此及彼 From here to there

过渡特效是通过一系列形如 transition-* 的样式属性来实现的。当元素的某个属性值发生变化时，设置在元素上的过渡特效就会生效，实现该属性样式的平稳过渡，而非立即切换到新的属性值。

下面利用按钮来创建一个基本示例，以演示 CSS 过渡的基本工作原理。本例从一个直角的蓝绿色按钮开始，鼠标悬停时，该按钮将过渡为一个圆角的红色按钮。图 15.1 展示了这两种状态以及其间过渡时的状态。

图 15.1 过渡前、过渡中以及过渡后的元素效果

【图 15.1 过渡前、过渡中以及过渡后的元素效果】

在新页面中添加一个按钮，并关联到一个新的样式表。按钮的 HTML 标记如代码清单 15.1 所示。

代码清单 15.1 为页面添加一个简单的按钮

<button type="button">Hover over me</button>

接着根据代码清单 15.2 同步更新样式表。这些样式定义了按钮的正常状态与悬停时的状态，其中有两个过渡属性，用于指示浏览器在两种状态间实现流畅过渡。

代码清单 15.2 具有过渡效果的按钮样式示例代码

button {
  padding: 0.3em 1em;
  border: 0;
  font-size: 1rem;
  color: white;
  background-color: oklch(74% 0.11 195deg); /* 蓝绿色按钮 */
  transition-property: all; /* 让过渡对所有属性变化生效 */
  transition-duration: 0.5s; /* 过渡时间为 0.5s */
}

button:hover { /* 悬停时按钮为红色、带圆角边框 */
  border-radius: 1em;
  background-color: oklch(55% 0.16 24deg);
}

属性 transition-property 用于指定对哪些属性启用过渡效果。本例中的关键字 all 表示过渡将对所有属性的变化生效。而属性 transition-duration 则表示过渡到最终状态时经历的时长，本例中即为 0.5s，表示 0.5 秒。

加载页面并使用鼠标划过按钮，就能看到该过渡效果。注意，尽管我们并没有在正常状态下明确声明圆角半径为 0，border-radius 属性仍旧十分流畅地从 0 过渡到了 1em。因为按钮自动将圆角半径的初始值设为了 0，圆角过渡便由 0 开始。当鼠标从元素上移开时，过渡效果则会反向生效。您也可以在悬停状态中试着改改其他样式属性，例如 font-size 或者 border 等等。

元素属性任何时候发生变化都会触发过渡：可以是状态改变的时候，比如 :hover；也可以是 JavaScript 导致状态变化的时候，例如添加或删除某个影响元素样式的 class 类。

注意，我们并没有在 :hover 规则集中设置形如 transition-* 的过渡属性，而是将它们设置在了一个可以始终选中该元素的选择器上，尽管我们确实是想让过渡效果对鼠标悬停状态生效。我们希望能在进入悬停状态时（淡入过渡）和退出悬停状态后（淡出过渡）都能看到过渡效果；而当其他属性改变时，我们往往并想让过渡属性本身也发生改变。

提示

在过渡效果结束时，您也可以使用 JavaScript 的 transitionend 事件来执行某类操作。

此外，还可以使用过渡特效的简写属性 transition，其语法结构如图 15.2 所示。该简写属性最多可接受四个参数值，分别代表这四个过渡属性：transition-property、transition-duration、transition-timing-function 以及 transition-delay。

图 15.2 简写属性 transition 的语法结构

【图 15.2 简写属性 transition 的语法结构】

第一个参数值用于确定哪些属性需要启用过渡，其初始值为关键字 all，表示对所有属性均生效；但若只有一个属性需要过渡，在这里指定属性名称即可。例如，transition-property: color 将只对元素颜色启用过渡，其余属性变化时则立即完成。也可以设置多个值，例如 transition-property: color, font-size。

第二个参数值为持续时间，是一个用秒（如 0.3s）或毫秒（如 300ms）表示的时间值。

警告

与长度值不同，0 不是一个合法的时间值。您必须为时间值指定一个单位（如 0s 或者 0ms），否则声明将无效，并被浏览器忽略。

第三个参数值为定时函数，用于控制属性中间值的计算方式，从而有效控制整个过渡过程中变化率如何加速或减速。定时函数的值可以是一个关键字，例如 linear 或者 ease-in，也可以是一个自定义函数。这是 CSS 过渡特效的核心知识，稍后将详细介绍。

最后一个参数为延迟时间，用于指定在属性值改变之后、过渡特效生效前的这段等待时间。如果为按钮的悬停状态切换设置 0.5s 的过渡延迟，那么当鼠标指针进入元素 0.5s 之后才会触发过渡效果。

如果需要为两个不同的属性分别设置不同的过渡效果，可以添加多个过渡规则，并以逗号进行分隔，如以下代码所示：

transition: border-radius 0.3s linear, background-color 0.6s ease;

相应地，如果使用普通写法，上述代码等效于以下样式声明：

transition-property: border-radius, background-color;
transition-duration: 0.3s, 0.6s;
transition-timing-function: linear, ease;

本章稍后还将演示一个使用了多个过渡规则的案例。

无障碍浏览设置：减少动效 Accessibility: Reduced motion

仔细考虑页面上的动效、尤其是在定义了大量动效的情况下，思考它们究竟会对用户带来怎样的影响就显得至关重要了。某些用户可能患有前庭运动障碍（vestibular motion disorders）；这通常是在人的内耳中出现的问题，当屏幕上出现某些动态效果时，患者会出现不同程度的不适感。操作系统为此类用户提供了相关配置，以减少屏幕动效对其造成的不良影响。

您应当启用媒体查询 prefers-reduced-motion 来查询该配置，并酌情调整 CSS 样式。在第 8 章，我曾建议将下列规则集引入 reset 图层样式中。添加该样式后，页面上所有的过渡与动画效果都会被移除，这样就无需手动重复相关操作了：
@layer reset {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}
上述代码用到了 !important 标记，以确保这些过渡与动画效果在任何情况下都能被彻底移除。注意，这里并没有声明 transition: none，而是设置了一个很短的持续时长，以达到动效不被察觉的目的。这样一来，页面中基于过渡或动画实现的逻辑（如 JavaScript 中的 animationend 事件）就仍然可以正常工作。

关于《CSS in Depth》（中译本书名《深入解析 CSS》）

	第 1 版	第 2 版
读者评分	原版：4.7（亚马逊）；中文版：9.3（豆瓣）	原版：5.0（亚马逊）；中文版：暂无，待出版
出版时间	原版：2018 年 3 月；中文版：2020 年 4 月	原版：2024 年 7 月；中文版：暂无，待出版
原价	原版：$44.99；中文版：￥139.00	原版：$59.99；中文版：暂无，待出版
现价	原版：$36.49；中文版：￥52.54 起步	原版：$52.09；中文版：暂无，待出版
原版国内预订	起步价￥461.00	起步价￥750.00

本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！

目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：

第一章层叠、优先级与继承（已完结）
1.1 层叠
1.2 继承
1.3 特殊值
1.4 简写属性
1.5 CSS 渐进式增强技术
1.6 本章小结

第二章相对单位（已完结）
2.1 相对单位的威力
2.2 em 与 rem
2.3 告别像素思维
2.4 视口的相对单位
2.5 无单位的数值与行高
2.6 自定义属性
2.7 本章小结

第三章文档流与盒模型（已完结）
3.1 常规文档流
3.2 盒模型
3.3 元素的高度
3.4 负的外边距
3.5 外边距折叠
3.6 容器内的元素间距问题
3.7 本章小结

第四章 Flexbox 布局（已完结）
4.1 Flexbox 布局原理
4.2 弹性子元素的大小
4.3 弹性布局的方向
4.4 对齐、间距等细节处
4.5 本章小结

第五章网格布局（已完结）
5.1 构建基础网格
5.2 网格结构剖析（上）
5.2.1 网格线的编号（下）
5.2.2 网格与 Flexbox 配合（下）

5.3 两种替代语法
5.3.1 命名网格线
5.3.2 命名网格区域

5.4 显式网格与隐式网格（上）
5.4.1 添加变化（中）
5.4.2 让网格元素填满网格轨道（下）

5.5 子网格（全新增补内容）
5.6 对齐相关的属性
5.7 本章小结

第六章定位与堆叠上下文（已完结）
6.1 固定定位
6.1.1 创建一个固定定位的模态对话框
6.1.2 在模态对话框打开时防止屏幕滚动
6.1.3 控制定位元素的大小

6.2 绝对定位
6.2.1 关闭按钮的绝对定位
6.2.2 伪元素的定位问题

6.3 相对定位
6.3.1 创建下拉菜单（上）
6.3.2 创建 CSS 三角形（下）

6.4 堆叠上下文与 z-index
6.4.1 理解渲染过程与堆叠顺序（上）
6.4.2 用 z-index 控制堆叠顺序（上）
6.4.3 深入理解堆叠上下文（下）

6.5 粘性定位
6.6 本章小结

第七章响应式设计（已完结）
7.1 移动端优先设计原则（上篇）
7.1.1 创建移动端菜单（下篇）
7.1.2 给视口添加 meta 标签（下篇）

7.2 媒体查询（上篇）
7.2.1 深入理解媒体查询的类型（上篇）
7.2.2 页面断点的添加（中篇）
7.2.3 响应式列的添加（下篇）

7.3 流式布局
7.4 响应式图片
7.5 本章小结

第八章层叠图层及其嵌套
8.1 用 layer 图层来操控层叠规则（上篇）
8.1.1 图层的定义（上篇）
8.1.2 图层的顺序与优先级（下篇）
8.1.3 revert-layer 关键字（下篇）

8.2 层叠图层的推荐组织方案
8.3 伪类 :is() 和 :where() 的用法
8.4 CSS 嵌套的使用
8.4.1 嵌套选择器的使用
8.4.2 深入理解嵌套选择器
8.4.3 媒体查询及其他 @规则的嵌套

8.5 本章小结

第九章 CSS 的模块化与作用域
9.1 模块的定义
9.1.1 模块和全局样式
9.1.2 一个简单的 CSS 模块
9.1.3 模块的变体
9.1.4 多元素模块

9.2 将模块组合为更大的结构
9.2.1 模块中多个职责的拆分
9.2.2 模块的命名

9.3 CSS 的作用域
9.3.1 CSS 作用域的就近原则
9.3.2 划定作用域的边界
9.3.3 CSS 中的隐式作用域
9.3.4 关于 CSS 作用域与层叠图层

9.4 CSS 模式库
9.5 本章小结

第十章 CSS 容器查询
10.1 容器查询的一个简单示例
10.1.1 容器尺寸查询的用法

10.2 深入理解容器
10.2.1 容器的类型
10.2.2 容器的名称
10.2.3 容器与模块化 CSS

10.3 与容器相关的单位
10.4 容器样式查询的用法
10.4.1 将模块与所在容器解耦
10.4.2 减少重复代码

10.5 本章小结

第 11 章颜色与对比
11.1 通过对比进行交流
11.1.1 模式的建立
11.1.2 还原设计稿

11.2 颜色的定义
11.2.1 色域与色彩空间
11.2.2 CSS 颜色表示法（RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH）

11.3 利用 OKLCH 处理颜色（上篇）
11.3.4 从页面其他颜色衍生出新颜色（下篇）

11.4 思考字体颜色的对比效果
11.5 本章小结

第 12 章 CSS 排版与间距
12.1 间距设置
12.1.1 使用 em 还是 px
12.1.2 对行高的深入思考
12.1.3 行内元素的间距设置

12.2 Web 字体
12.3 谷歌字体
12.4 @font-face 的工作原理
12.4.1 字体格式与回退处理
12.4.2 同一字型的多种变体形式

12.5 性能因素考量
12.5.1 font-display 属性解析
12.5.2 可变字体的用法

12.6 调整字间距，提升可读性
12.6.1 正文的字间距
12.6.2 标题、小元素和间距

12.7 本章小结

第 13 章渐变、阴影与混合模式
13.1 渐变
13.1.1 使用多个颜色节点（上）
13.1.2 颜色插值方法（中）
13.1.3 径向渐变（下）
13.1.4 锥形渐变（下）

13.2 阴影
13.2.1 利用渐变和阴影打造立体感
13.2.2 使用扁平化设计创建元素
13.2.3 创建混合风格的按钮外观

13.3 混合模式
13.3.1 为图片上色
13.3.2 混合模式的类型
13.3.3 图片纹理的添加
13.3.4 融合混合模式的用法

13.4 本章小结

第 14 章蒙版、形状与剪切
14.1 滤镜
14.1.1 滤镜的类型
14.1.2 背景滤镜

14.2 蒙版
14.2.1 带渐变效果的蒙版特效
14.2.2 基于亮度来定义蒙版
14.2.3 其他蒙版属性

14.3 剪切路径
14.3.1 多边形的裁剪路径
14.3.2 Firefox 内置的剪切路径工具
14.3.3 其他剪切路径类型

14.4 浮动与形状
14.4.1 浮动
14.4.2 形状的定义

14.5 本章小结

附录
附录A：CSS 选择器参考
附录B：CSS 预处理器简介