CSS transition-delay属性用法及代码示例

此 CSS 属性指定开始过渡效果的持续时间。此属性的值定义为秒 (s) 或毫秒 (ms)。 CSS 过渡是添加的效果，用于将元素逐渐从一种样式更改为另一种样式，无需使用 Flash 或 JavaScript。

如果不使用 transition-delay，动画将从元素上的悬停开始，但使用此 CSS 属性，我们可以将动画延迟一段时间。

用法

transition-delay:time | initial | inherit;

transition-delay 属性的默认值为 0，这意味着转换将立即开始发生，没有任何延迟。

属性值

time:它指定在转换开始之前等待的时间量(以秒或毫秒为单位)。

initial:它将此属性设置为其默认值。

inherit:它从其父元素继承此属性。

延迟可以是负数、正数或零。

transition-delay 属性的负值将立即启动过渡效果，即效果将被动画化，就好像它已经开始一样。此属性的正值会导致过渡效果在给定时间内开始。

我们可以指定在转换多个属性时有用的多个延迟。每个延迟都将应用于相关属性，如 transition-property 属性所定义。例如，假设我们提供两个 transition-delay 值。第一个值影响 transition-property 属性给出的第一个属性。第二个 transition-delay 影响过渡属性给出的属性名称列表中的第二个属性。

让我们看看 transition-delay 属性的一些示例。

示例 1

在此示例中，我们使用 transition-property、transition-duration 和 transition-delay 属性。启动过渡效果有0.5s的延迟，即在给定的时间后div元素的背景颜色将发生变化。

<!DOCTYPE html>
<html>
<head>
<title>
CSS transition-delay Property
</title>
<style>
div{
width:100px;
height:100px;
background:lightblue;
transition-property:background-color;
transition-duration:1s;
transition-delay:0.5s;              
  
/* For Safari browser */
-webkit-transition-property:background-color;
-webkit-transition-duration:1s;
-webkit-transition-delay:0.5s;
}
div:hover {
background-color:brown;
}
</style>
</head>
<body>
<div></div>
<p> Move the cursor over the div element above, to see the transition effect. </p>
</body>
</html>

输出

例2

在这个例子中，有两个 div 元素。在第一个 div 中，我们使用 transition-delay 属性的初始值。在第二个 div 中，我们应用了 transition-delay 属性的负值，即 -2s。我们必须将光标移动到 div 元素上才能看到过渡效果。

<!DOCTYPE html>
<html>
<head>
<title>
CSS transition-delay Property
</title>

<style>
p{
font-size:20px;
}
.first{
width:150px;
height:150px;
background-color:lightblue;
transition-property:width;
transition-duration:1s;
transition-delay:initial;

/* For Safari browser */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-delay:initial;

}
.second{
width:150px;
height:150px;
background-color:lightgreen;
transition:width 1s, height 2s, background-color 2s;
transition-delay:-2s;
}

.first:hover {
width:300px;
}
.second:hover{
width:250px;
height:250px;
background-color:brown;
}
</style>
</head>

<body>
<center>
<h2> Example of transition-delay Property </h2>
<p> Move the cursor over the div element, to see the transition effect. </p>
<div class = "first">
<p> transition-delay:initial </p>
</div>
<div class = "second">
<p> transition-delay:-2s </p>
</div>
</center>
</body>
</html>

输出

示例

现在，还有另一个例子，其中有多重过渡效果。在这里，过渡影响宽度、高度和变换。还有一个transition-delay的单位是毫秒(ms)，即2.5ms。

<!DOCTYPE html>
<html>
<head>
<style>
div {
padding:15px;
width:200px;
height:200px;
background:lightgreen;
transition:background-color 1s, width 2s, height 2s, transform 2s;
transition-delay:1.5ms;
}
p{
font-size:20px;
}
div:hover {
width:300px;
height:300px;
-webkit-transform:rotate(360deg); /* Chrome, Safari, Opera */
transform:rotate(360deg);
background-color:orange;
}
</style>
</head>
<body>
<div>
<h2>JavaTpoint.com</h2>
<p> (Move your cursor on me to see the effect)</p></div>
</body>
</html>

输出

相关用法

注：本文由纯净天空筛选整理自 CSS transition-delay property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。