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

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

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

文章目录

  • [第 5 部分 添加动效 Adding motion](#第 5 部分 添加动效 Adding motion)
  • [第 15 章 过渡 Transitions](#第 15 章 过渡 Transitions)
    • [15.1 状态间的由此及彼 From here to there](#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 为页面添加一个简单的按钮

html 复制代码
<button type="button">Hover over me</button>

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

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

css 复制代码
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 秒。

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

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

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

提示

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

此外,还可以使用过渡特效的简写属性 transition,其语法结构如图 15.2 所示。该简写属性最多可接受四个参数值,分别代表这四个过渡属性:transition-propertytransition-durationtransition-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 之后才会触发过渡效果。

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

css 复制代码
transition: border-radius 0.3s linear, background-color 0.6s ease;

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

css 复制代码
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 图层样式中。添加该样式后,页面上所有的过渡与动画效果都会被移除,这样就无需手动重复相关操作了:

css 复制代码
@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 预处理器简介
相关推荐
高山我梦口香糖44 分钟前
[react] <NavLink>自带激活属性
前端·javascript·react.js
撸码到无法自拔1 小时前
React:组件、状态与事件处理的完整指南
前端·javascript·react.js·前端框架·ecmascript
高山我梦口香糖1 小时前
[react]不能将类型“string | undefined”分配给类型“To”。 不能将类型“undefined”分配给类型“To”
前端·javascript·react.js
代码cv移动工程师1 小时前
HTML语法规范
前端·html
桃园码工1 小时前
13_HTML5 Audio(音频) --[HTML5 API 学习之旅]
音视频·html5·audio
Elena_Lucky_baby1 小时前
实现路由懒加载的方式有哪些?
前端·javascript·vue.js
Domain-zhuo1 小时前
如何利用webpack来优化前端性能?
前端·webpack·前端框架·node.js·ecmascript
理想不理想v1 小时前
webpack如何自定义插件?示例
前端·webpack·node.js
小华同学ai2 小时前
ShowDoc:Star12.3k,福利项目,个人小团队的在线文档“简单、易用、轻量化”还专门针对API文档、技术文档做了优化
前端·程序员·github
王解2 小时前
Vue CLI 脚手架创建项目流程详解 (2)
前端·javascript·vue.js