【CSS in Depth 2 精译_099】17.5：基于页面滚动的动画时间线设置（全新）+ 17.6：最后一点建议 + 17.7：本章小结
当前内容所在位置（可进入专栏查看其他译好的章节内容）
- 第五部分 添加动效 ✔️
- 【第 17 章 动画】 ✔️
- 17.1 关键帧
- 17.2 3D 变换下的动画设置
- 17.2.1 添加动画前页面布局的构建
- 17.2.2 为布局添加动画
- 17.3 动画延迟与填充模式
- 17.4 通过动画传递意图
- 17.4.1 对用户交互的反馈
- 17.4.2 吸引用户注意力
- 17.5 基于页面滚动的动画时间线设置 ✔️
- 17.6 最后一点建议 ✔️
- 17.7 本章小结 ✔️
文章目录
- 17.5 基于页面滚动的动画时间线设置 Scroll-based timelines
- 17.6 最后一点建议 One final piece of advice
- 17.7 本章小结 Summary
《CSS in Depth》新版封面
译者按
终于来到了全书的最后一部分内容。想不到作者还给各位预留了彩蛋——CSS新推的 animation-timeline 属性。虽然由于浏览器兼容问题没有详细展开，但完全脱离 JavaScript 实现基于页面滚动的动画特效，想想就让人好奇心爆棚。文末给出的参考文章更是脑洞大开，让人直呼过瘾。能在这本新书正式发行当年顺利完成整本书【正文+附录】部分的翻译，也是我始料未及的。这次弥足珍贵的专栏日更之旅，也再次证明了一点：不积跬步无以至千里。至少我自己对每天日更精进 CSS 的强大力量是有所低估的。让我们继续 stay hungry, stay foolish，在完善自我的道路上矢志不渝地践行长期主义，迎接属于我们的崭新未来！
17.5 基于页面滚动的动画时间线设置 Scroll-based timelines
动画特效常常以线性方式从头播到尾，但它们也可以与页面滚动（scrolling）绑定到一起。当用户向下滚动页面时，可以让动画随页面滚动同步播放；如果向上滚动，动画则相应反向进行。要实现这类动效往往需要借助 JavaScript 脚本；但 CSS 提供的一个全新属性，却能在不依赖任何 JavaScript 的情况下实现同样的效果。
要用纯 CSS 实现同样的页面效果，只需在动画元素上声明 animation-timeline: scroll() 即可。然而，截至 2024 年年中，该特性还尚未得到 Firefox 和 Safari 浏览器的支持。因此目前并不推荐在生产环境中启用该写法，除非是在页面功能业已丰富齐全的情况下、仅仅出于锦上添花的需求来引入该特性。查看该特性最新的浏览器支持情况，详见 Can I Use 官网：https://mng.bz/qOvr。
译注
根据 Can I Use 网站提供的最新数据，截至 2024 年 12 月 28 日，各大主流浏览器厂商对
animation-timeline的兼容情况还不容乐观，Firefox和Safari仍未能提供相应支持（最新截图如下）。因此在项目开发过程中，若要正式引入该功能，还请务必慎重。
【补图 1：各大浏览器厂商对 animation-timeline 属性的最新兼容情况（截至 2024 年 12 月 28 日）】
鉴于此，本节将向您演示一个能在 Chrome 和 Edge 浏览器中运行的简单示例。在一个新建的样式表中，添加如代码清单 17.16 所示的样式代码。该代码会在页面的右上角定位一个蓝色的指示标记块，并在上面定义一个基础的旋转动画效果。
代码清单 17.16 基于页面滚动的动画时间线示例样式代码
body {
margin: unset;
height: 200lvh; /* 令页面强制滚动 */
}
.indicator {
position: fixed;
top: 15px;
right: 15px;
height: 50px;
width: 50px;
background-color: oklch(74% 0.08 260deg);
animation-name: spin;
animation-timeline: scroll(); /* 将动画与滚动位置相绑定 */
}
@keyframes spin {
from {
rotate: 0deg;
}
to {
rotate: 360deg;
}
}
上述代码中的指示标记块会随着用户页面的滚动而旋转，并且标记块在动画中的位置与用户滚动的页面位置息息相关；若页面向下滚动到 25% 位置处停止，则动画特效也会沿着第一帧到最后一帧的方向，在 25% 的位置处同步停止。
译注
感觉这里缺了一个示例页截图，给大家补一个：
【补图 2：基于页面滚动的动画时间线示例页效果图（滚动条大致位于 25% 位置）】
该动效最好放到交互式环境中进行查看。将上述样式表关联到一个包含 <div class="indicator"> 元素的示例页中，如代码清单 17.17 所示。这样就能在浏览器中进行查看了。
代码清单 17.17 页面滚动动画特效对应的示例 HTML 标记
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="indicator"></div><!-- 带旋转特效的指示标记元素 -->
</body>
</html>
默认情况下，scroll() 函数会把元素的动画特效绑定到 DOM 树中具有滚动条的最近的那个祖先级元素。该函数还可以通过下列参数值限定不同的行为模式：
scroll(nearest)—— 即默认行为，表示相对于最近的祖先元素的滚动位置来执行动画；scroll(root)—— 即相对于当前文档的根节点元素的滚动位置来执行动画；scroll(self)—— 即相当于当前元素的滚动位置来执行动画。
此外，您也可以手动指定动画效果与页面滚动的某个方向进行绑定。该方向值可以是默认的 block 方向，也可以是 inline、y 或者 x 方向。例如，指定 scroll(inline root) 后，动画特效会相对于根元素的任意行内滚动进行绑定；而声明 scroll(y nearest) 则会令元素动画与带有滚动条的、最近祖先元素的垂直方向进行绑定。
前面演示的案例都比较简单，但通过将一些富有创意的设计方案与更为复杂的动画特效相结合，我们就能构建出更多极具想象力的动画效果。例如，可以让页面上的装饰性元素在页面滚动经过它们的时候，利用动画特效从框架外部进入页面；再比如，还可以利用动画时间线原理设计一个 视差（parallax） 效果，即当用户滚动页面时，让页面不同位置的内容以不同的速度进行移动。
相了解更多基于页面滚动的动画特效案例用法，可以参考发表在 Codrops 网站上的这篇文章：《A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()》。这样的动画特效可以让页面更加生动有趣且便于交互，即便页面只包含仅供浏览的内容。
17.6 最后一点建议 One final piece of advice
对很多 Web 开发者而言，CSS 是一门让人望而生畏的语言。只因它的一只脚踩在设计领域，另一只脚却踩在代码世界。CSS 语言中有些内容并不太直观，特别是对于那些自学的开发者，情况更是如此。希望这本书可以帮您找到一些门道。
我们已经深入学习了 CSS 这门语言中最基础的部分，也学习了一些页面布局中容易产生疑惑的内容。其中涵盖了很多话题：从如何组织 CSS 让代码更易于维护，到最新的页面布局方案。我们还尝试涉足设计领域，并构建出了方便实用且赏心悦目的界面（interface）。
我最后再给您一条建议，那就是永葆好奇心。我已经向您介绍了 CSS 工具集里的一大批工具，但这些工具可以组合与搭配的方式是无穷无尽的。当您遇到某个令人印象深刻的 Web 页面时，不妨打开浏览器的开发者工具，试着去弄清它的实现原理。新的 CSS 特性层出不穷，尤其是在过去的几年里，这些新特性新语法更是让人眼花缭乱。多多关注那些不断推出创意演示案例、或者提供趣味教程的线上开发者与设计师；不断尝试新鲜事物，养成终身学习的好习惯。
17.7 本章小结 Summary
@keyframe动画定义了动画中的关键点。使用animation-*属性可以将关键帧动画应用到元素上。animation属性是多个动画属性的简写形式，其中包括animation-name、animation-duration、animation-timing-function以及animation-iteration-count属性。animation-fill-mode属性可以在动画开始之前将动画的第一帧应用于该元素，并且（或者）可以在动画结束时将动画的最后一帧应用于该元素。利用该属性可以让动画无缝开始或结束。- 恰当的动画效果可以在用户需要了解某些信息，或者需要与某些内容互动时，有效地传达相关意图。
JavaScript脚本可以在适当的时机触发动画的播放。- 动画为网页中的用户交互增添了重要意义，并不仅限于页面装饰作用。
关于《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 本章小结
- 第 15 章 过渡
- 15.1 状态间的由此及彼
- 15.2 定时函数
- 15.2.1 定制贝塞尔曲线
- 15.2.2 阶跃
- 15.3 非动画属性
- 15.3.1 不可添加动画效果的属性
- 15.3.2 淡入与淡出
- 15.4 过渡到自然高度
- 15.5 自定义属性的过渡设置
- 15.6 本章小结
- 第 16 章 变换
- 16.1 旋转、平移、缩放与倾斜
- 16.1.1 变换原点的更改
- 16.1.2 多重变换的设置
- 16.1.3 单个变换属性的设置
- 16.2 变换在动效中的应用
- 16.2.1 放大图标（上）
- 16.2.2 带“飞入”特效的文本标签的创建（下）
- 16.2.3 过渡特效的交错渲染（下）
- 16.3 动画的性能
- 16.4 三维变换
- 16.4.1 控制透视距离
- 16.4.2 高级三维变换效果的实现
- 16.5 本章小结
- 附录
- 附录A：CSS 选择器参考
- 附录B：CSS 预处理器简介