transition-delay
试一试
transition-delay: 250ms;
transition-property: margin-right;
transition-delay: 1s;
transition-property: background-color;
transition-delay: 1s;
transition-property: margin-right, color;
transition-delay: 1s, 250ms;
transition-property: margin-right, color;
<section id="default-example">
<div id="example-element">Hover to see<br />the transition.</div>
</section>
#example-element {
background-color: #e4f0f5;
color: black;
padding: 1rem;
border-radius: 0.5rem;
font: 1em monospace;
width: 100%;
transition: margin-right 2s;
}
#default-example:hover > #example-element {
background-color: #990099;
color: white;
margin-right: 40%;
}
延迟可以是零、正数或负数。
- 值
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>-
表示属性值更改与过渡效果开始之间等待的时间量。
正式定义
正式语法
transition-delay =
<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 |
浏览器兼容性
加载中…