Open In App

How to create multiple transitions on an element using CSS ?

Last Updated : 24 Jul, 2024
Comments
Improve
Suggest changes
1 Like
Like
Report

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.

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:

Output:


Next Article

Similar Reads