当前内容所在位置（可进入专栏查看其他译好的章节内容）
- 第五部分 添加动效 ✔️
- 【第 15 章 过渡】 ✔️
- 15.1 状态间的由此及彼 ✔️
- 15.2 定时函数
文章目录
- 第 5 部分 添加动效 Adding motion
- 第 15 章 过渡 Transitions
- 15.1 状态间的由此及彼 From here to there
《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 过渡前、过渡中以及过渡后的元素效果】
在新页面中添加一个按钮，并关联到一个新的样式表。按钮的 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 的语法结构】
第一个参数值用于确定哪些属性需要启用过渡，其初始值为关键字 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 预处理器简介
