CSS Transition 属性

什么是 CSS Transition 属性？

CSS 过渡是添加到元素中的效果，可以在不使用 Flash 或 JavaScript 的情况下，将元素从一种样式逐渐更改为另一种样式。

CSS 过渡的组成部分

• 过渡属性和持续时间： 指定要动画化的 CSS 属性，例如 width、height、color 等。

使用秒 (s) 或毫秒 (ms) 的时间单位定义过渡效果的长度。

• 开始过渡： 默认情况下，当用户将鼠标悬停在元素上时，会开始过渡。

为了获得更大的控制力，也可以使用 JavaScript 启动过渡。

注意：IE9 及更早版本不支持 transition 属性。

CSS 过渡如何工作？

CSS transition 属性允许您指定要过渡的 CSS 属性，以及过渡的计时函数和长度。当指定的属性发生变化时（例如，添加了一个类或鼠标悬停时），过渡会在初始状态和目标状态之间的属性值之间平滑插值。

语法

• 属性： 您希望过渡的 CSS 属性，例如 color、width、opacity 等。
• 持续时间： 过渡完成所需的时间，以秒 (s) 或毫秒 (ms) 为单位。
• 计时函数： 计时函数控制过渡的缓和与加速。常用术语有 ease、linear、ease-in、ease-out 和 ease-in-out。
• 延迟： 过渡开始前的一个可选时间，以秒 (s) 或毫秒 (ms) 为单位。

示例

让我们举一个例子，定义 width 属性的过渡效果和 3 秒的持续时间。

注意：如果不指定持续时间部分，过渡将不起作用，因为其默认值为 0。当您将鼠标悬停在元素上时，过渡效果就开始了。

注意：当您逐渐将鼠标光标从元素上移开时，它会恢复到原始样式。

CSS 多重过渡效果

它为多个 CSS 属性添加过渡效果。如果您想为多个属性添加过渡效果，请用逗号分隔这些属性。

示例： 在这里，过渡会影响 width、height 和 transform。

过渡简写

使用 transition 属性简写，您可以定义许多过渡属性，例如属性、持续时间、计时函数和延迟。使用此简写可以使代码更易于理解和更短。

语法

transition 属性简写的语法如下

示例

在这种情况下，将使用 ease-in-out 计时函数，为 width 属性提供 0.5 秒的过渡，延迟 0.2 秒，并使用 transition 属性简写。

注意：您可以通过用逗号分隔每个过渡属性来包含多个过渡属性。

CSS 可过渡和不可过渡的属性

• 某些 CSS 属性可以随着状态的变化而平滑地进行动画，这得益于 CSS 过渡。这些过渡仅适用于某些类型的属性。
• 为了创建平滑的效果，如调整大小、移动和淡入淡出，可以无缝地过渡数值，包括尺寸（width、height）、间距（margin、padding）、字体大小（font size）和一些定位属性（top、right、bottom、left）。
• 颜色、背景和边框属性也可以过渡，以实现统一的颜色变化。变换属性（如 transform、rotate 和 scale）可以实现旋转和缩放等动画。
• 但是，并非所有属性都可以过渡。非数字属性（如 visibility、position 和 display）无法过渡。与文本、字体、背景、内容和列表相关的属性也不在可能的过渡范围之内。
• 为了确保行为一致，请始终在多种浏览器中测试过渡，以确保兼容性。

理解 CSS 中的过渡触发器

Web 元素现在因 CSS 过渡而拥有动态动画，并且特定的触发器会启动这些动画。过渡触发器决定动画何时开始，从而实现平滑的视觉变化。

这种触发器的一个典型例子是 :hover 伪类。

以下伪类和事件可以引起您元素的 are 状态变化。

• :focus: 当元素获得焦点时匹配；
• :hover: 当鼠标光标悬停在元素上时匹配。
• :focus-within: 当元素或其后代获得焦点时匹配。
• :target: 当元素的 id 与当前 URL 的片段匹配时匹配。
• :active: 当元素处于活动状态时（通常在鼠标悬停在其上方时）。
• 通过 JavaScript 更改类： 当元素的 CSS 类通过 JavaScript 更改时，CSS 将过渡所有符合条件的已更改属性。

进入或退出时的不同过渡

更改悬停和焦点状态的过渡设置会产生一些有趣的效果。

指定过渡的速度曲线

transition 属性中包含的 timing-function 属性用于指定过渡的速度曲线。在过渡的开始和结束状态之间，值的计算方式取决于计时函数。在 CSS 中，有许多预定义的计时函数可以创建各种动画效果。它可以具有以下值

• Ease (默认): 此计时函数在中途加速，然后在最后阶段减速。动画看起来自然流畅。

示例

• Linear: 动画是一致且机械的，因为此计时函数在整个过渡过程中保持恒定的速度。ease-in: 此计时功能开始时缓慢，并在临近结束时迅速加速，给人一种元素“逐渐进入”过渡的感觉。

示例

• Ease-in: 此计时功能开始时缓慢，并在临近结束时迅速加速，给人一种元素“逐渐进入”过渡的感觉。

示例

• Ease-out: 此计时函数开始时速度快，在结束时减慢，给人一种过渡“逐渐消失”的感觉。

示例

• Ease-in-out: 此计时函数结合了 ease-in 和 ease-out 的功能，可实现平稳的开始、加速、减速和结束。

示例

• Cubic-bezier: 使用三次贝塞尔控制点，您可以使用此计时函数设计自定义加速曲线。它可以通过动画曲线进行精确控制。

示例

CSS 过渡属性的浏览器支持

以下是一些支持 CSS 过渡的流行 Web 浏览器

• 谷歌浏览器
• Mozilla Firefox
• Apple Safari
• Microsoft Edge (包括 EdgeHTML 和基于 Chromium 的版本)
• Opera
• Brave
• Vivaldi
• Samsung Internet
• UC Browser

需要注意的是，尽管这些现代浏览器完全支持 CSS 过渡，但在多种浏览器和版本中测试您的过渡以确保行为和外观的一致性始终是一个好主意。