CSS - transition-delay Property

CSS transition-delay property determines the amount of time to wait before starting a transition effect when a property's value changes. This property can be applied to individual properties being transitioned or to the transition shorthand property.

Possible Values

  • <time> − It specifies the amount of time to wait between a property's value changes before the transition effect begins.

The delay can be zero, positive, or negative.

  • The transition effect will start immediately with a value of 0s (or 0ms).

  • A positive value will result in a delay of the transition effect for the specified amount of time.

  • A negative value will start the transition effect instantly and partway through the effect, simulating the animation as if it had been running for the specified amount of time.

CSS allows you to set various delays for transitioning properties. The delays correspond with the properties defined by the transition property attribute. If there are fewer delays, they will be repeated; otherwise, they will be truncated to match the number of properties. The CSS declaration remains valid in both cases.

Applies to

All elements, ::before and ::after pseudo-elements.

Syntax

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

CSS transition-delay - <time> Value

The following example shows that as you hover over the box, the background colour changes to greenyellow and the padding increases to 20px smoothly over 4s with a 2s delay −

<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 - Different Delay Time

The following example demonstrates creating a sliding-up effect. When you hover over the box, the box appears one by one with the different delays and background colors −

<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>
Advertisements