transition-delay
试一试
延迟可以是零、正数或负数。
- 值为
0s
(或0ms
)将立即开始过渡效果。 - 正值将延迟过渡效果的开始时间,延迟时间为指定的时间长度。
- 负值将立即开始过渡效果,并且在效果的中间部分开始。换句话说,效果将被动画化,就像它已经运行了指定的时间长度一样。
您可以指定多个延迟,这在转换多个属性时非常有用。每个延迟将应用于由 transition-property
属性指定的对应属性,该属性充当主列表。如果指定的延迟少于主列表中的延迟,则延迟值的列表将重复,直到足够为止。如果有更多延迟,则延迟值的列表将被截断以匹配属性的数量。在这两种情况下,CSS 声明仍然有效。
语法
css
/* <time> values */
transition-delay: 3s;
transition-delay: 2s, 4ms;
/* Global values */
transition-delay: inherit;
transition-delay: initial;
transition-delay: revert;
transition-delay: revert-layer;
transition-delay: unset;
值
<time>
-
表示在属性值更改和过渡效果开始之间要等待的时间量。
正式定义
正式语法
示例
显示不同延迟的示例
HTML
html
<div class="box delay-1">0.5 seconds</div>
<div class="box delay-2">2 seconds</div>
<div class="box delay-3">4 seconds</div>
<button id="change">Change</button>
CSS
css
.box {
margin: 20px;
padding: 10px;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
font-size: 18px;
transition-property: background-color, font-size, transform, color;
transition-timing-function: ease-in-out;
transition-duration: 3s;
}
.transformed-state {
transform: rotate(270deg);
background-color: blue;
color: yellow;
font-size: 12px;
transition-property: background-color, font-size, transform, color;
transition-timing-function: ease-in-out;
transition-duration: 3s;
}
.delay-1 {
transition-delay: 0.5s;
}
.delay-2 {
transition-delay: 2s;
}
.delay-3 {
transition-delay: 4s;
}
JavaScript
js
function change() {
const elements = document.querySelectorAll("div.box");
for (const element of elements) {
element.classList.toggle("transformed-state");
}
}
const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);
结果
规范
规范 |
---|
CSS 过渡 # transition-delay-property |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。