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秒。这意味着当鼠标离开元素时，宽度会立即恢复到原来的值，而不会有延迟效果。