CSS | 转换延迟属性

概述

转换延迟属性 (Transition Delay Properties) 是 CSS3 中用于定义过渡效果的属性之一，用于控制元素变换前需要等待的时间。该属性包含以下子属性：

• transition-delay
• transition-duration
• transition-property
• transition-timing-function

本文将介绍 transition-delay 属性的用法和示例，并提供一些使用技巧。

transition-delay 属性

transition-delay 属性定义了过渡开始前的等待时间，可以使用秒或毫秒作为单位。默认值为 0s，表示过渡立即开始。

语法

transition-delay: <time>

其中，<time> 可以是一个时间值，表示等待时间。

示例

下面的示例将为按钮添加一个过渡效果，等待 1 秒后再开始过渡：

.button {
  transition-delay: 1s;
}
.button:hover {
  background-color: red;
}

使用技巧

• transition-delay 可以与其他过渡属性一起使用，如下所示：

  .button {
    transition: background-color 1s ease-in-out 0.5s;
  }
  

  在这个示例中，按钮的背景颜色将在 1 秒内从当前颜色过渡到下一个颜色，过渡效果是缓慢进入和缓慢退出，等待时间为 0.5 秒。

• transition-delay 可以用来创建复杂的过渡效果，如下所示：

  .shape {
    transition: width 2s ease 0, height 2s ease 0.5s;
  }
  

  这个示例中，形状的宽度将在 2 秒内从 100px 变为 200px，等待时间为 0s；而形状的高度将在 2 秒内从 100px 变为 200px，等待时间为 0.5s。

结论

转换延迟属性可以帮助我们创建更加平滑和自然的过渡效果。transition-delay 属性控制了过渡开始前的等待时间。我们可以使用 transition-delay 与其他过渡属性一起使用，创建出更加复杂的过渡效果。