CSS - transition-delay 属性

CSS transition-delay 属性确定当属性的值更改时，在开始转换效果之前等待的时间量。此属性可以应用于正在转换的单个属性，也可以应用于转换速记属性。

可能的值

<time> - 它指定了在过渡效果开始之前，属性的值更改之间等待的时间量。

延迟可以是零、正或负。

过渡效果将立即以 0s（或 0ms）的值开始。
如果为正值，则在指定的时间内，过渡效应将出现延迟。
如果为负值，则过渡效果将立即开始，并在效果进行中途启动，模拟动画，就好像它已经运行了指定的时间一样。

CSS 允许您为转换属性设置各种延迟。延迟与过渡属性属性定义的属性相对应。如果延误较少，它们将被重复;否则，它们将被截断以匹配属性的数量。CSS 声明在这两种情况下都有效。

适用于

所有元素，：：before 和：：after 伪元素。

语法


transition-delay: 3s;
transition-delay: 2s, 4ms;

CSS transition-delay - <time> 值

以下示例显示，当您将鼠标悬停在框上时，背景颜色会变为黄绿色，并且填充会在 4 秒内平滑增加到 20px，延迟为 2 秒 -


<html>
<head>
<style>
	 	.transition-box {
	 	 	 font-size: 14px;
	 	 	 width: 100px;
	 	 	 padding: 5px;
	 	 	 margin: 10px;
	 	 	 transition: padding, background-color;
	 	 	 background-color: lightskyblue;
	 	 	 transition-delay: 2s;
	 	 	 transition-duration: 4s;
	 	}
	 	.transition-box:hover {
	 	 	 background-color: greenyellow;
	 	 	 padding: 20px;
	 	}
</style>
</head>
<body>
	 	<div class="transition-box">Hover over me</div>
</body>
</html>

CSS transition-delay - 不同的延迟时间

以下示例演示如何创建向上滑动效果。当您将鼠标悬停在框上时，该框会一个接一个地出现，具有不同的延迟和背景颜色 -


<html>
<head>
<style>
	 	.container {
	 	 	 display: grid;
	 	 	 grid-template-columns: repeat(3, 1fr);
	 	 	 height: 100px;
	 	}
	 	.box {
	 	 	 text-align: center;
	 	 	 padding: 1rem;
	 	 	 background-color: lightskyblue;
	 	 	 margin: 0 5px;
	 	 	 border-radius: 8px;
	 	 	 position: relative;
	 	 	 overflow: hidden;
	 	}
	 	.box div {
	 	 	 text-decoration: none;
	 	 	 font-size: 20px;
	 	 	 display: block;
	 	}
	 	.box div span {
	 	 	 display: block;
	 	 	 background: lightcyan;
	 	 	 padding: 10px;
	 	 	 font-size: 16px;
	 	 	 position: absolute;
	 	 	 bottom: 0;
	 	 	 left: 0;
	 	 	 width: 100%;
	 	 	 transform: translateY(100%);
	 	 	 transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
	 	}
	 	.box:hover div span {
	 	 	 transform: translateY(0);
	 	}
	 	.box div span:nth-child(1) {
	 	 	 transition-delay: 0.5s;
	 	 	 background: lightsalmon;
	 	}
	 	.box div span:nth-child(2) {
	 	 	 transition-delay: 1s;
	 	 	 background: lightgray;
	 	}
	 	.box div span:nth-child(3) {
	 	 	 transition-delay: 1.5s;
	 	 	 background: lightgreen;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <div class="box"><div>Hover Over Me	
	 	 	 	 	<span>First</span>
	 	 	 	 	<span>Second</span>
	 	 	 	 	<span>Third</span>
	 	 	 </div>
	 	</div>
	 	</div>
</body>
</html>

打印本页