转换

CSS 播客 - 044：转场

在与网站互动时，您可能会注意到许多元素都具有状态。例如，下拉菜单可以处于打开或关闭状态。按钮处于聚焦状态或悬停时，可能会改变颜色。模态出现和消失。

默认情况下，CSS 会即时切换这些状态的样式。

使用 CSS 过渡，我们可以在元素的初始状态和目标状态之间进行插值。两者之间的过渡可提供有关互动原因和影响的视觉方向、支持和提示，从而增强用户体验。

过渡属性

浏览器支持

  • Chrome：26。 <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：16. <ph type="x-smartling-placeholder">
  • Safari：9. <ph type="x-smartling-placeholder">

来源

如需在 CSS 中使用过渡效果，您可以使用各种过渡属性或 transition 简写属性。

转换属性

transition-property 属性指定要转换的样式。

.my-element {
  transition-property: background-color;
}

transition-property 接受逗号分隔列表中的一个或多个 CSS 属性名称。

（可选）您可以使用 transition-property: all 指示每个属性都应转换。

transition-duration

transition-duration 属性用于定义完成转换所需的时间。

transition-duration 接受时间单位，单位可以是秒 (s) 或毫秒 (ms)，默认值为 0s。

transition-timing-function

使用 transition-timing-function 属性可以更改 transition-duration 过程中的 CSS 过渡速度。

默认情况下，CSS 会以恒定速度 (transition-timing-function: linear) 转换元素。不过，线性过渡最终看起来有点人为：在现实生活中，物体是有重量的，不能立刻停止和开始。缓入或缓出过渡可使过渡更加生动和自然。

我们的“CSS 动画”单元很好地概述了计时函数。

您可以使用 DevTools 实时实验不同的计时功能。

Chrome 开发者工具可视化转换时间编辑器。

过渡延迟

使用 transition-delay 属性指定过渡的开始时间。如果未指定 transition-duration，则转换将立即启动，因为默认值为 0s。此属性接受时间单位，例如秒 (s) 或毫秒 (ms)。

此属性对于交错过渡非常有用，可以通过为组中的每个后续元素设置较长的 transition-delay 来实现。

transition-delay 也有助于调试。将延迟时间设为负值可开始向时间轴过渡。

简写：Transition

与大多数 CSS 属性一样，有简写版本。transition 结合了 transition-property、transition-duration、transition-timing-function 和 transition-delay。

.longhand {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.shorthand {
  transition: transform 300ms ease-in-out 0s;
}

哪些内容可以转换，哪些内容不可转换？

在编写 CSS 时，您可以指定哪些属性应具有动画转换。请参阅此 MDN 列表（包含可设置动画效果的 CSS 属性）。

一般来说，只能对具有“中间状态”的元素进行过渡开始状态和最终状态之间的变化。例如，无法为 font-family 添加过渡，因为不清楚“中间状态”是什么介于 serif 和 monospace 之间的值应如下所示。另一方面，可以为 font-size 添加转场效果，因为它的单位是可以插值的长度。

形状从一种状态平稳过渡到另一种状态的示意图，以及采用不同字体的两行文本无法顺畅转换。

以下是您可以转换的一些常见属性。

转换

浏览器支持

  • Chrome：36。 <ph type="x-smartling-placeholder">
  • Edge：12。 <ph type="x-smartling-placeholder">
  • Firefox：16. <ph type="x-smartling-placeholder">
  • Safari：9. <ph type="x-smartling-placeholder">

来源

transform CSS 属性通常会转换，因为它是 GPU 加速的属性，可以生成更流畅的动画，同时消耗更少的电量。借助此属性，您可以对元素进行任意缩放、旋转、平移或倾斜。

请查看我们的“函数”模块中的转换部分。

颜色

在互动之前、期间和之后，颜色可以很好地指示状态。例如，将鼠标悬停在某个按钮上时，该按钮可能会改变颜色。此颜色更改可向用户提供有关按钮可点击的反馈。

color、background-color 和 border-color 属性只是可用于设置颜色的几个地方 在交互时转换。

请查看有关颜色的单元。

阴影

阴影通常会进行转换，以指示高度变化，例如用户焦点的变化。

请查看阴影相关单元。

过滤条件

filter 是一个强大的 CSS 属性，可让您即时添加图形效果。在不同 filter 状态之间转换可以产生一些令人印象深刻的结果。

请查看有关滤镜的单元。

转换触发器

您的 CSS 必须包含状态变化和一个事件，该事件会触发该状态变化以使 CSS 过渡启用。此类触发器的一个典型示例是 :hover 伪类。当用户将光标悬停在元素上时，此伪类会匹配。

下面列出了一些可以在元素中触发状态变化的伪类和事件。

  • :hover：如果光标位于元素上，则匹配。
  • :focus：如果元素获得焦点，则匹配。
  • :focus-within：如果元素或其任何后代 重点。
  • :target：在当前网址的 fragment 与元素的 ID 匹配时匹配。
  • :active：在元素被激活时匹配（通常 ）。
  • class 从 JavaScript 发生变化：当元素的 CSS class 通过 JavaScript 和 CSS 将会对已更改且符合条件的属性进行转换。

用于进入或退出的不同过渡

通过为悬停/焦点设置不同的 transition 属性，可以创建一些有趣的效果。

.my-element {
  background: red;

  /* This transition is applied on the "exit" transition */
  transition: background 2000ms ease-in;
}

.my-element:hover {
  background: blue;

  /* This transition is applied on the "enter" transition */
  transition: background 150ms ease;
}

无障碍功能注意事项

CSS 过渡并不适合所有人。对于某些人，过渡和动画可能会导致晕动或不适。幸运的是，CSS 有一项名为 prefers-reduced-motion 的媒体功能，可以检测用户是否表明首选设备减少动作。

/*
  If the user has expressed their preference for
  reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
  .my-element {
    transition: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
  .my-element {
    transition: transform 250ms ease;
  }
}

如需详细了解此媒体功能，请参阅我们的博文 prefers-reduced-motion: 有时减少运动量。

性能考虑因素

使用 CSS 过渡时，如果您为某些 CSS 属性添加过渡，则可能会遇到性能问题。例如，当 width 或 height 等属性发生更改时，它们会将网页其余部分的内容推移。这会迫使 CSS 针对过渡的每一帧，为每个受影响的元素计算新位置。我们建议您尽可能改用 transform 和 opacity 等属性。

如需深入了解此主题，请参阅我们的高性能 CSS 动画指南。

检查您的理解情况

测试您对转场知识的掌握情况

哪个过渡属性用于指定加/减速？

transition-duration
请重试。
transition-easing
不是真实的 CSS 属性。
transition-cubic-bezier
不是真实的 CSS 属性。
transition-timing-function
正确！
animation-ease
不是真实的 CSS 属性。

最佳实践是使用 transition-property: all

true
请重试。指定 all 可能会导致性能问题和意外转换。
false
正确。最佳实践是单独指定每个属性。更精细的控制将带来更好的效果和更可预测的结果。

所有属性都可以转换。

true
请重试。font-family 等属性无法转换。
false
正确。您可以为不兼容的属性指定过渡，但它们将离散过渡。