CSS 属性

CSS的transition-delay属性决定当属性值改变时开始过渡效果之前等待的时间。此属性可应用于正在转换的各个属性或转换速记属性。

属性值

  • <time>: 它指定在过渡效果开始之前属性值更改之间等待的时间量。

延迟可以是零、正数或负数。

  • 过渡效果将立即开始，值为 0s（或 0ms）。

  • 正值将导致过渡效果延迟指定的时间。

  • 负值将立即启动过渡效果并在效果进行到一半时，模拟动画，就好像它已经运行了指定的时间一样。

CSS 允许您为过渡属性设置各种延迟。延迟与 transition 属性定义的属性相对应。如果延误较少，则会重复；否则，它们将被截断以匹配属性的数量。 CSS 声明在这两种情况下仍然有效。

适用范围

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

语法

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

CSS transition-delay: <time> 值

以下示例显示，当您将鼠标悬停在框上时，背景颜色变为黄绿，并且填充在 4 秒内平滑增加到 20 像素，延迟 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">鼠标悬停看效果</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>鼠标悬停看效果
         <span>第一</span>
         <span>第二</span>
         <span>第三</span>
      </div>
   </div>
   </div>
</body>
</html>