CSS3 Transition Shorthand Property


The transition shorthand property allows us to specify transition-property, transition-duration, transition-timing function and transition-delay as values to transition property in one line −

  • transition-duration − Specifies how many seconds or milliseconds a transition effect takes to complete

  • transition-property − The name of the property the effect is on

  • transition-timing function − The speed curve of the transition

  • transition-delay − Set the delay for the transition effect in seconds

Remember, you need to set the CSS property on which the effect is applied and the duration as well.

Let’s say we will convert a shape to oval on mouse over. For that, set a div −

<div class="container">
   <div></div>
</div>

Style the container with the transition −

.container div {
   width: 300px;
   height: 100px;
   border-radius: 1px;
   background-color: rgb(25, 0, 255);
   border: 2px solid red;
   transition: border-radius 2s ease 1s, background-color 2s ease-out 1s ;
}

The Transition-duration

Above, the duration is set for the border-radius and background-color property. The transition-duration is set to 2 seconds −

2s for the border-radius property
2s for the background-color property

The Transition-delay

Above, the delay is set on the border-radius and background-color property. The transition-delay is set to 1 second and 2 seconds respectively;

1s for the border-radius property
2s for the background-color property

The Transition-timing-function

Above, the transition is set on the border-radius and background-color property. The transition-timing-function is set to −

ease for the border-radius
ease-out for the background-color property

On hover, the shape will convert to oval since the border-radius is set to 50. The background-color will also change −

container:hover div {
   background-color: orange;
   border-radius: 50%;
}

Example

The following is the code for the transition shorthand property in CSS −

<!DOCTYPE html>
<html>
<head>
   <style>
      .container div {
         width: 300px;
         height: 100px;
         border-radius: 1px;
         background-color: rgb(25, 0, 255);
         border: 2px solid red;
         transition: border-radius 2s ease 1s, background-color 2s ease-out 1s ;
      }
      .container:hover div {
         background-color: orange;
         border-radius: 50%;
      }
   </style>
</head>
<body>
   <h1>Transition shorthand property</h1>
   <div class="container">
      <div></div>
   </div>
   <p>Hover over the above div to change its color and its shape to oval</hp>
</body>
</html>

Updated on: 31-Oct-2023

338 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements