CSS Transitions（过渡）：介绍与使用

CSS Transitions 允许你在不使用 JavaScript 的情况下，平滑地改变一个元素从一个样式到另一个样式的过程。以下是一些常用的 Transitions 属性及其用法。

transition

介绍

transition 是用于设置过渡效果的简写属性。

使用示例

div {
  transition: all 0.3s ease;
}

说明

这会使 div 元素的所有可过渡属性在 0.3 秒内平滑地改变。

transition-property

介绍

定义哪些 CSS 属性将接受过渡效果。

使用示例

div {
  transition-property: opacity, transform;
}

说明

这会使 div 元素的 opacity 和 transform 属性能够过渡。

transition-duration

介绍

定义过渡效果需要多长时间完成。

使用示例

div {
  transition-duration: 2s;
}

说明

这会使 div 元素的过渡效果在 2 秒内完成。

transition-timing-function

介绍

定义过渡效果的时间曲线。

使用示例

div {
  transition-timing-function: ease-in-out;
}

说明

这会使 div 元素的过渡效果以 "ease-in-out" 的方式进行，即开始和结束比中间慢。

transition-delay

介绍

定义过渡效果何时开始。

使用示例

div {
  transition-delay: 1s;
}

说明

这会使 div 元素的过渡效果在 1 秒后开始。

常用推荐

1. transition: all 0.3s ease: 这是一个非常常用的过渡设置，适用于多数场景。
2. transition-property: opacity, transform: 当你只需要几个属性有过渡效果时，明确指定它们可以提高性能。
3. transition-timing-function: ease-in-out: 这通常会给用户一个更好的体验感。

希望这篇文章能帮助你更好地理解和使用 CSS Transitions！