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 |
瀏覽器相容性
載入中…