transition-delay
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
CSS 的transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。
值以秒(s)或毫秒(ms)为单位,表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果;取值为负时会导致过渡立即开始。
你可以指定多个延迟时间,每个延迟将会分别作用于你所指定的相符合的 css 属性(transition-property)
语法
css
/* <time>?值 */
transition-delay: 3s;
transition-delay: 2s, 4ms;
/* 全局变量 */
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;
取值
<time>
-
表明动画效果属性生效之前需要等待的时间。
形式语法
示例
展示不同的延迟
HTML
html
<div class="box delay-1">0.5 秒</div>
<div class="box delay-2">2 秒</div>
<div class="box delay-3">4 秒</div>
<button id="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);
结果
规范
Specification |
---|
CSS Transitions # transition-delay-property |
浏览器兼容性
BCD tables only load in the browser