How to create multiple transitions on an element using CSS?


Creating multiple transitions on an element using CSS is a great way to add interest and interactivity to the website. By merging various transitions, we can create a dynamic and engaging experience for the users. In this article, we will cover the basics of how to create multiple transitions on an element using CSS.

Cascading Style Sheets (CSS) is a powerful tool for styling web pages. One of its most useful features is the ability to create smooth and visually engaging transitions between different states of an element, such as when it is hovered over or clicked on.

What are CSS Transitions?

Before knowing how to create multiple transitions, let's first understand what CSS transitions are. A transition is a gradual change between two states of an element. For example, when we hover over a button, its background color gradually changes from one color to another color. CSS allows us to specify the duration and timing of these transitions, as well as the properties that are being transitioned.

Syntax

css-selector{
   transition: property duration timing-function delay;
}

Transition Properties in CSS

The transition properties we can use in CSS include −

  • transition-property − This property specifies which CSS properties should be transitioned.

  • transition-duration − This property specifies the duration of the transition in seconds or milliseconds. By default, the transition duration is 0, which means there is no transition effect applied.

  • transition-timing-function − This property controls the speed and timing of the transition.

  • transition-delay − This property specifies a delay before the transition starts.

Creating a Basic Transition

To create a transition, we will need to specify the property that we want to animate, such as the duration of the transition, the timing function, and any delay. For example, to create a transition for the width of a button, for doing this we can use the following code −

button {
   transition: width 0.5s ease-in-out;
}

The above code specifies that the width of the button will transition over a period of 0.5 seconds using an ease-in-out timing function.

Creating Multiple Transitions

To create multiple transitions on an element, we will need to add additional transitions to the CSS code. For example, to create a button that transitions both the width and background-color properties, for doing this we can use the following code −

button {
   transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

The above code specifies that both the width and background-color properties of the button will transition over a period of 0.5 seconds using an ease-in-out timing function.

Here are some full code examples of how to create multiple transitions on an element using CSS −

Example 1

In this example, we will create a button that transitions both the width and background-color properties. However, we will use different durations for each transition to create a staggered effect.

<html>
<head>
   <style>
      body{
         text-align: center;
      }
      button {
         margin: auto;
         width: 100px;
         height: 50px;
         background-color: green;
         border: none;
         color: #fff;
         font-size: 16px;
         padding: 10px 20px;
         transition: width 0.5s ease-in, background-color 1s ease-out;
      }
      button:hover {
         width: 150px;
         background-color: red;
      }
   </style>
</head>
   <body>
      <h3>Multiple Transitions with Different Durations</h3>
      <button>Hover Me</button>
   </body>
</html>

In the above example, we set a width of 100px and a background-color of green for the button. We then set the transition property to transition both the width and background-color properties. However, we use a duration of 0.5s for the width transition and a duration of 1s for the background-color transition. This creates a staggered effect where the width of the button transitions faster than the background-color. When the button will be hovered over, the width expands to 150px, and the background-color will change to red.

Example 2

In this example, we will create a box that transitions both the background-color and border-radius properties. However, we will use a delay for the border-radius transition.

<html>
<head>
   <style>
      body{
         text-align: center;
      }
      .box {
         margin: auto;
         width: 200px;
         height: 200px;
         background-color: red;
         border-radius: 50%;
         transition: background-color 0.5s ease-in-out, border-radius
         0.5s ease-in-out 0.5s;
      }
      .box:hover {
         background-color: blue;
         border-radius: 0;
      }
   </style>
</head>
   <body>
      <h3>Multiple Transitions with Delays</h3>
      <div> Hover over the below circle to see multiple transitions</div>
      <div class="box"></div>
   </body>
</html>

In the above example, we set a width and height of 200px for the box and background-color of red. We then set the transition property to transition both the background-color and border-radius properties. However, we use a delay of 0.5s for the border-radius transition. This means that the background-color will transition immediately, while the border-radius will wait for 0.5s before transitioning. When the box will be hovered over, the background-color will be changed to blue and the border-radius transitions to 0, creating a square shape.

Example 3

Here, we will create a button that transitions both the width and color properties. However, we will use different timing functions for each transition to create a unique effect.

<html>
<head>
   <style>
      body{
         text-align: center;
      }
      button {
         margin: auto;
         width: 120px;
         height: 60px;
         background-color: blue;
         border: none;
         color: red;
         font-size: 18px;
         padding: 10px 20px;
         transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
         color 1s ease-in-out;
      }
      button:hover {
         width: 180px;
         color: #fff;
      }
   </style>
</head>
   <body>
      <h3>Multiple Transitions with Different Timing Functions</h3>
      <button>Hover Me</button>
   </body>
</html>

In this above example, we set the width of 120px and the backgroundcolor of blue for the button and then set the transition property to transition both the width and color properties. However, we use a different timing function for each transition. The width transition uses a custom cubic-bezier function. When the button will be hovered over, the width expands to 180px, and the text color will be changed from red to white.

Conclusion

CSS transitions are a powerful tool for creating smooth and visually appealing effects on web pages. By using the transition property, we can specify the duration, timing function, and properties that are being transitioned. We can also create multiple transitions on an element by specifying multiple properties in the transition property.

Updated on: 16-Mar-2023

769 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements