CSS transition-delay属性的作用是什么

CSS transition-delay属性用于指定过渡效果开始执行的延迟时间。它可以与CSS的transition属性一起使用，来控制元素从一个状态到另一个状态的过渡时机。

当一个元素的状态发生改变时，可以通过添加transition-delay属性来延迟过渡效果的开始时间。这可以用于创建连续的或有序的动画效果，或者为某些元素提供更好的视觉层次结构。

transition-delay属性的值可以是一个时间值，用于指定延迟的时间长度。它可以是秒（s）或毫秒（ms）。默认情况下，transition-delay属性的值为0，表示过渡效果立即开始执行。

以下是一个示例，展示了如何使用transition-delay属性来延迟过渡效果的开始时间：

.element {
width: 100px;
height: 100px;
background-color: red;
transition-property: width;
transition-duration: 2s;
transition-delay: 1s;
}
.element:hover {
width: 200px;
}

在上述示例中，当鼠标悬停在元素上时，元素的宽度将从100px过渡到200px。过渡效果将在1秒后开始执行，持续2秒。这意味着当鼠标离开元素时，宽度会立即恢复到原来的值，而不会有延迟效果。