transition: property duration timing-function delay; /*property:指要过渡的CSS属性； duration：过渡时长； timing-function：过渡效果； delay：等待时间（可选）； */
其中最重要的就是delay属性。该属性用于设置等待时间的毫秒数，可以让元素在一段时间内保持某种状态，让效果更加自然、流畅。延迟时间可以是正值、负值或零值，默认为0。
除了delay属性，还有一个transition-timing-function属性，用于设置过渡的时间曲线。该属性可以设置一些预定义的时间曲线，比如linear、ease、ease-in、ease-out、ease-in-out等。
.box{
width: 100px;
height: 100px;
background-color: red;
transition: width 2s ease-in-out 1s;
/*2秒内，width过渡效果为淡入淡出，延迟1秒后开始*/
}
.box:hover{
width: 300px;
/*鼠标悬浮时，宽度从100px过渡到300px*/
}在样式中设置过渡效果后，当触发某个事件时（如鼠标悬浮、点击等），该元素会在指定的时间内呈现出变化效果，并且可以通过设置等待时间来实现更加自然的过渡效果。等待时间是CSS3中一个很有用的功能，可以让页面的呈现更加生动、灵活，增加视觉效果的吸引力。