CSS transition-delay屬性用于指定過渡效果開始執(zhí)行的延遲時間。它可以與CSS的transition屬性一起使用，來控制元素從一個狀態(tài)到另一個狀態(tài)的過渡時機。
當(dāng)一個元素的狀態(tài)發(fā)生改變時，可以通過添加transition-delay屬性來延遲過渡效果的開始時間。這可以用于創(chuàng)建連續(xù)的或有序的動畫效果，或者為某些元素提供更好的視覺層次結(jié)構(gòu)。
transition-delay屬性的值可以是一個時間值，用于指定延遲的時間長度。它可以是秒（s）或毫秒（ms）。默認(rèn)情況下，transition-delay屬性的值為0，表示過渡效果立即開始執(zhí)行。
以下是一個示例，展示了如何使用transition-delay屬性來延遲過渡效果的開始時間：
.element {
width: 100px;
height: 100px;
background-color: red;
transition-property: width;
transition-duration: 2s;
transition-delay: 1s;
}
.element:hover {
width: 200px;
}
在上述示例中，當(dāng)鼠標(biāo)懸停在元素上時，元素的寬度將從100px過渡到200px。過渡效果將在1秒后開始執(zhí)行，持續(xù)2秒。這意味著當(dāng)鼠標(biāo)離開元素時，寬度會立即恢復(fù)到原來的值，而不會有延遲效果。
億速云公眾號
手機網(wǎng)站二維碼