CSS - transition-duration Property

CSS transition-duration property determines amount of time that a transition animation should take to complete. Default value is 0, indicating that no animation will take place.

Possible Value

  • <time> − This value represents the duration for the transition between the old and new values of a property. When the time is 0s, the transition will not occur; instead, the two states will change instantly. Any negative value for the time would make the declaration invalid.

  • 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.

When using CSS transitions, you can assign multiple durations, each corresponding to a property defined by the transition-property in the master list.If the specified durations are less than in the master list, the user agent repeats the list; if more, it truncates to the correct size. CSS declaration remains valid in both cases.

Applies to

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

Syntax

transition-duration: 6s;

CSS transition-duration - <time>

The following example demonstrates that transition-duration: 4s property specifies the duration of the transition effect as 4s −

<html>
<head>
<style>
   .transition-box {
      font-size: 14px;
      width: 100px;
      padding: 10px;
      border-radius: 10px;
      transition: margin-left, background-color;
      background-color: violet;
      transition-duration: 4s;
   }
   .transition-box:hover {
      background-color: lightblue;
      margin-left: 70px;
   }
</style>
</head>
<body>
   <div class="transition-box">Hover over me</div>
</body>
</html>

CSS transition-duration - Sliding-up Effect

The following example demonstrates the sliding-up effect. When you hover over the box, other boxes appear one by one over each other, with different transition durations −

<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-duration: 0.1s;
      background: lightsalmon;
   }
   .box div span:nth-child(2) {
      transition-duration: 2s;
      background: lightgray;
   }
   .box div span:nth-child(3) {
      transition-duration: 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