CSS3 transition-delay 属性

在 web 前端开发中，transition-delay 属性用于指定在 CSS 过渡效果开始之前等待的时间长度。这个属性可以让你控制过渡效果何时开始执行，从而实现更加灵活的动画效果。

语法

transition-delay: time;

• time：指定等待的时间长度，可以是秒（s）或毫秒（ms）单位。可以设置多个值，用逗号分隔。

值

• time：指定一个或多个时间值，表示每个过渡效果的延迟时间。如果设置多个值，每个值对应一个过渡效果。

示例

基本示例

.element {
  transition-property: background-color;
  transition-duration: 1s;
  transition-delay: 0.5s;
}

在这个示例中，当元素的背景颜色发生变化时，过渡效果将在 0.5 秒后开始执行。

多个值示例

.element {
  transition-property: background-color, color;
  transition-duration: 1s, 0.5s;
  transition-delay: 0.5s, 1s;
}

在这个示例中，元素的背景颜色和文字颜色发生变化时，背景颜色的过渡效果将在 0.5 秒后开始执行，文字颜色的过渡效果将在 1 秒后开始执行。

注意事项

• transition-delay 只是指定了过渡效果开始之前的等待时间，不会影响过渡效果的持续时间。
• 如果同时指定了 transition-delay 和 transition-duration，过渡效果将在指定的延迟时间后开始执行，持续时间为 transition-duration 指定的值。

以上就是关于 CSS 属性 transition-delay 的介绍，希望能帮助你更好地理解和运用这个属性。在实际开发中，合理利用 transition-delay 可以为页面添加更加生动和吸引人的动画效果。