CSS - transition-delay 屬性

CSS transition-delay 屬性確定當屬性值發生變化時，在開始過渡效果之前等待的時間量。此屬性可以應用於正在過渡的單個屬性，也可以應用於 transition 簡寫屬性。

可能的值

<time> − 它指定在屬性值發生變化後，在過渡效果開始之前等待的時間量。

延遲可以為零、正數或負數。

過渡效果將立即以 0s（或 0ms）的值開始。
正值會導致過渡效果延遲指定的時間量。
負值將立即並部分地開始過渡效果，模擬動畫，就像它已經運行了指定的時間量一樣。

CSS 允許您為過渡屬性設定不同的延遲。這些延遲與 transition 屬性屬性定義的屬性相對應。如果延遲較少，則會重複使用；否則，它們將被截斷以匹配屬性的數量。在兩種情況下，CSS 宣告仍然有效。

應用於

所有元素，::before 和 ::after 偽元素。

語法

transition-delay: 3s;
transition-delay: 2s, 4ms;

CSS transition-delay - <time> 值

以下示例顯示，當您將滑鼠懸停在框上時，背景顏色平滑地更改為 greenyellow，並且填充在 4 秒內增加到 20px，延遲 2 秒 -

<html>
<head>
<style>
   .transition-box {
      font-size: 14px;
      width: 100px;
      padding: 5px;
      margin: 10px;
      transition: padding, background-color;
      background-color: lightskyblue;
      transition-delay: 2s;
      transition-duration: 4s;
   }
   .transition-box:hover {
      background-color: greenyellow;
      padding: 20px;
   }
</style>
</head>
<body>
   <div class="transition-box">Hover over me</div>
</body>
</html>

CSS transition-delay - 不同的延遲時間

以下示例演示如何建立向上滑動效果。當您將滑鼠懸停在框上時，框會一個接一個地出現，並具有不同的延遲和背景顏色 -

<html>
<head>
<style>
   .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      height: 100px;
   }
   .box {
      text-align: center;
      padding: 1rem;
      background-color: lightskyblue;
      margin: 0 5px;
      border-radius: 8px;
      position: relative;
      overflow: hidden;
   }
   .box div {
      text-decoration: none;
      font-size: 20px;
      display: block;
   }
   .box div span {
      display: block;
      background: lightcyan;
      padding: 10px;
      font-size: 16px;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      transform: translateY(100%);
      transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
   }
   .box:hover div span {
      transform: translateY(0);
   }
   .box div span:nth-child(1) {
      transition-delay: 0.5s;
      background: lightsalmon;
   }
   .box div span:nth-child(2) {
      transition-delay: 1s;
      background: lightgray;
   }
   .box div span:nth-child(3) {
      transition-delay: 1.5s;
      background: lightgreen;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box"><div>Hover Over Me 
         <span>First</span>
         <span>Second</span>
         <span>Third</span>
      </div>
   </div>
   </div>
</body>
</html>

列印頁面