过渡 在 CSS 中

允许您定义 HTML 元素如何在状态之间过渡的 CSS 属性

分享此页面

新增！ 我的 44 页电子书“CSS 在 44 分钟内”已出版！ 😃

立即获取 →

#transition-delay

定义过渡在开始之前需要等待多长时间。

默认 transition-delay: 0s;

过渡将等待零秒，因此立即开始。

transition-delay: 1.2s;

您可以使用小数值（以秒为单位）以及关键字 s。

transition-delay: 2400ms;

您可以使用毫秒代替秒，以及关键字 ms。

transition-delay: -500ms;

您可以使用负值：过渡将开始，就像它已经播放了 500ms 一样。

#transition-duration

定义过渡持续多长时间。

默认 transition-duration: 0s;

过渡将持续零秒，因此是瞬时的。

transition-duration: 1.2s;

您可以使用小数值（以秒为单位）以及关键字 s。

transition-duration: 2400ms;

您可以使用毫秒代替秒，以及关键字 ms。

#transition-property

定义哪些属性将过渡。

默认 transition-property: all;

元素将过渡所有属性

transition-property: none;

元素将不过渡任何属性：因此过渡是瞬时的。

transition-property: background;

元素将只过渡背景属性。

transition-property: color;

元素将只过渡颜色属性。

transition-property: transform;

元素将只过渡变换属性。

#transition-timing-function

定义如何计算过渡开始和结束之间的值。

默认 transition-timing-function: ease;

过渡开始缓慢，在中间加速，并在结束时减速。

transition-timing-function: ease-in;

过渡开始缓慢，并逐渐加速直到结束。

transition-timing-function: ease-out;

过渡开始快速，并逐渐减速直到结束。

transition-timing-function: ease-in-out;

与 ease 相似，但更明显。

过渡开始快速，并逐渐减速直到结束。

transition-timing-function: linear;

过渡具有恒定速度。

transition-timing-function: step-start;

过渡立即跳转到最终状态。

transition-timing-function: step-end;

过渡保持在初始状态直到结束，然后立即跳转到最终状态。

transition-timing-function: steps(4, end);

通过使用带整数的 steps()，您可以定义在到达结束之前特定数量的步骤。元素的状态将不会逐渐变化，而是会在不同的瞬间从一个状态跳跃到另一个状态。

#transition

用于 transition-property transition-duration transition-timing-function 和 transition-delay 的简写属性。

只有 transition-duration 是必需的。

transition: 1s;

  • transition-duration 设置为 1s
  • transition-property 默认为 all
  • transition-timing-function 默认为 ease
  • transition-delay 默认为 0s

transition: 1s linear;

  • transition-duration 设置为 1s
  • transition-property 默认为 all
  • transition-timing-function 设置为 linear
  • transition-delay 默认为 0s

transition: background 1s linear;

  • transition-duration 设置为 1s
  • transition-property 设置为 background
  • transition-timing-function 设置为 linear
  • transition-delay 默认为 0s

transition: background 1s linear 500ms;

  • transition-duration 设置为 1s
  • transition-property 设置为 background
  • transition-timing-function 设置为 linear
  • transition-delay 设置为 500ms

transition: background 4s, transform 1s;

您可以将具有自身过渡持续时间的多个属性组合在一起。