How to create multiple transitions on an element using CSS ?

Last Updated : 20 Jun, 2022

In this article, we are going to learn how we can have multiple transitions on an element. Generally, we apply or create more than one transition to create some effects in our design. In CSS there are certain properties that can be transitioned.

Approach: To have multiple transitions on an element, basically we have two ways. One is specifying the properties to be transitioned, the time duration of the transition, and the timing function of the transition separately and let that work. Another way to implement this is to add all the details about the transition in a shorthand form where we add the property, time duration, and timing function of the properties and separate them with commas.

Transition keywords:

transition: This keyword can be used with a CSS property in inline, internal, or external CSS. This needs the property (transition-property) which will be transitioned, the time duration (transition-duration) of the transition, timing(transition-timing-function) function of the transition. We can give those values individually to the property or we can use the shorthand technique to add all of them at the same time.
transition-property: This is used to specify the properties to be transitioned.
transition-duration: This is used to specify the time duration for which the properties will be transitioned.
transition-timing-function: This is used to specify the time duration for which the properties will be transitioned.

The below example demonstrates the above approach.

Example 1: In the below-given code, we have added transitions to transform the color, border, padding-top and padding-bottom, and font size using the shorthand transition form.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
  
    <style> 
        h3 { 
            color: brown !important; 
        } 
  
        .container { 
            display: flex !important; 
        } 
  
        div { 
            font-family: "Lucida Sans", "Lucida Sans Regular"; 
            font-size: 1rem; 
            margin: 2rem; 
            justify-content: center; 
            display: flex; 
            border: 10px solid green; 
            width: 18rem; 
            height: 7rem; 
            padding-bottom: 20px; 
            padding-top: 20px; 
            transition: color 1s ease-out, padding-top 1s ease-out, 
                padding-bottom 1s ease-out, font-size 2s ease-out; 
        } 
  
        div:hover { 
            color: rebeccapurple; 
            border: 10px solid brown; 
            padding-top: 100px; 
            padding-bottom: 30px; 
            font-size: 1.8rem; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green; margin: 2rem;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3 style="margin: 2.2rem; margin-top: -2rem"> 
        How to have multiple CSS  
        transitions on an element? 
    </h3> 
      
    <div>GeeksforGeeks</div> 
</body> 
  
</html>

Output:

Example 2: In the below-given code we have added transitions to transform the color, border, padding-top and padding-bottom, font-size using the transition-property, transition-duration, and transition-timing-function separately:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
  
    <style> 
        h3 { 
            color: brown !important; 
        } 
  
        .container { 
            display: flex !important; 
        } 
  
        div { 
            font-family: "Lucida Sans", "Lucida Sans Regular"; 
            font-size: 1rem; 
            margin: 2rem; 
            justify-content: center; 
            display: flex; 
            border: 10px solid green; 
            width: 18rem; 
            height: 7rem; 
            padding-bottom: 20px; 
            padding-top: 20px; 
            transition-property: color, border, padding-top,  
                padding-bottom, font-size; 
            transition-duration: 1s; 
            transition-timing-function: ease-out; 
        } 
  
        div:hover { 
            color: royalblue; 
            border: 10px solid grey; 
            padding-top: 100px; 
            padding-bottom: 30px; 
            font-size: 1.8rem; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green; margin: 2rem;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3 style="margin: 2.2rem; margin-top: -2rem"> 
        How to have multiple CSS  
        transitions on an element? 
    </h3> 
      
    <div>GeeksforGeeks</div> 
</body> 
  
</html>