CSS 过渡语法

在 CSS 中，过渡（transition）用来定义在一个 CSS 属性值变化时所渐变的属性。过渡可以使 CSS 变得更具交互性，使页面看起来更动态。

语法

transition: property duration timing-function delay;

• property：必选，指定要过渡的属性。
• duration：可选，指定过渡的持续时间，默认是 0s。
• timing-function：可选，指定过渡的时间函数（easing function），默认是 ease。
• delay：可选，指定过渡延迟的时间，默认是 0s。

示例

/* 将 div 元素的背景颜色在 1 秒内渐变为红色 */
div {
  background-color: blue;
  transition: background-color 1s;
}

div:hover {
  background-color: red;
}

过渡的属性

过渡（transition）可以应用于大多数 CSS 属性，如下表：

| 属性 | 描述 | | --- | --- | | background-color | 背景颜色 | | background-position | 背景位置 | | border-color | 边框颜色 | | border-width | 边框宽度 | | bottom/right/left/top | 元素定位 | | color | 字体颜色 | | font-size | 字体大小 | | height/width | 元素高度/宽度 | | line-height | 行高 | | margin | 外边距 | | opacity | 透明度 | | padding | 内边距 | | transform | 转换 | | visibility | 可见性 |

时间函数

时间函数（timing function）定义了动画如何开始和结束，它可以平滑过渡动画的速度，使其更加自然。

CSS 内置了多个时间函数，如下表：

| 函数 | 描述 | | --- | --- | | linear | 匀速 | | ease | 缓进缓出 | | ease-in | 缓进 | | ease-out | 缓出 | | ease-in-out | 缓进缓出 | | step-start | 瞬间跳到动画开始状态 | | step-end | 瞬间跳到动画结束状态 |

延迟时间

延迟时间（delay）定义了动画开始前的等待时间，它有助于控制动画的同步。

结论

CSS 过渡（transition）可以帮助我们为页面增加更多的交互性，使页面看起来更加生动。我们可以应用过渡到任何支持过渡的 CSS 属性上，通过设置时间函数和延迟时间来控制动画速度和同步。