How to set width transition in Tailwind CSS ?
Last Updated :
10 Mar, 2023
In Tailwind CSS, the transition utility is used to apply a width transition to an element. The transition utility accepts a list of properties, duration, and timing functions for the transition.
Approach: To create a width transition, we can use the transition class and a duration and easing function to animate the width change. For example, we can use the w-* classes to set the initial width of an element and then use the hover:w-* classes to increase the width on hover. To animate the width change smoothly, the transition-all class along with the desired duration and easing function is applied.
Syntax:
<element class="w-initial_width transition-all
duration:desired_duration timing_function
hover:w-final_width">
...
</element>
Below are some examples showing width transition in Tailwind CSS.
Example 1: In this example, there is a div element with an initial width of w-64, a height of h-64, and a background color of bg-green-500. The transition class applies a transition to the width property with a duration of 100 milliseconds and a timing function of ease-out. When the user hovers over the div element, the hover:w-80 class increases the width to 80 pixels. The transition class smoothly animates the width change over a duration of 100 milliseconds with an easing effect.
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" >
</ script >
< title >
How to set width transition in Tailwind CSS ?
</ title >
</ head >
< body >
< div class="w-64 h-64 bg-green-500
transition-all duration-100
ease-out hover:w-80">
</ div >
</ body >
</ html >
|
Output:
How to do width transition in Tailwind CSS?
Example 2: In this example, width transition using different timing functions and duration is applied to the div element. Each div element has an initial width of w-64 and a final width of w-80. We can observe that the speed of the width transition decreases gradually due to the change in the duration.
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" >
< script src =
</ script >
< title >Width Transition</ title >
</ head >
< body >
< div class="w-64 h-14 bg-green-500
transition-all duration-200
ease-in-out hover:w-80">
</ div >
< div class="w-64 h-14 bg-green-600
transition-all duration-300
ease-in hover:w-80">
</ div >
< div class="w-64 h-14 bg-green-700
transition-all duration-500
ease-out hover:w-80">
</ div >
< div class="w-64 h-14 bg-green-900
transition-all duration-1000
ease-linear hover:w-80">
</ div >
</ body >
</ html >
|
Output:
How to do width transition in Tailwind CSS?
Share your thoughts in the comments
Please Login to comment...