CSS 播客 - 044:转场
在与网站互动时,您可能会注意到许多元素都具有状态。例如,下拉菜单可以处于打开或关闭状态。按钮处于聚焦状态或悬停时,可能会改变颜色。模态出现和消失。
默认情况下,CSS 会即时切换这些状态的样式。
使用 CSS 过渡,我们可以在元素的初始状态和目标状态之间进行插值。两者之间的过渡可提供有关互动原因和影响的视觉方向、支持和提示,从而增强用户体验。
过渡属性
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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 实时实验不同的计时功能。
过渡延迟
使用 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
添加转场效果,因为它的单位是可以插值的长度。
以下是您可以转换的一些常见属性。
转换
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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 发生变化:当元素的 CSSclass
通过 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-easing
transition-timing-function
animation-ease
transition-duration
transition-cubic-bezier
最佳实践是使用 transition-property: all
所有属性都可以转换。