Tailwind CSS Duration, Timing Functions, and Delay
In Tailwind CSS, you can control the duration, timing functions, and delay of transitions to create smooth and visually appealing animations. Here’s a detailed explanation of each aspect:
1. Duration
The duration
utility in Tailwind CSS defines how long a transition effect lasts. This is specified in milliseconds (ms). Tailwind provides several predefined durations, but you can also customize them in your tailwind.config.js
file.
Default Duration Utilities
duration-75
: 75 millisecondsduration-100
: 100 millisecondsduration-150
: 150 millisecondsduration-200
: 200 millisecondsduration-300
: 300 millisecondsduration-500
: 500 millisecondsduration-700
: 700 millisecondsduration-1000
: 1000 milliseconds
Example
<button class="transition-transform duration-300 transform hover:scale-110">
Hover to scale
</button>
In this example:
transition-transform
applies a transition to the transform property.duration-300
specifies that the transition will take 300 milliseconds.
2. Timing Functions
The ease
utilities control the timing function of a transition, which determines the speed curve of the transition. Tailwind CSS includes several predefined easing functions, but you can also define custom ones.
Default Timing Functions
ease-linear
: A constant speed throughout the transition.ease-in
: Starts slow and speeds up.ease-out
: Starts fast and slows down.ease-in-out
: Starts and ends slow, with a faster speed in the middle.
Example
<div class="transition-transform duration-500 ease-in-out hover:translate-x-10">
Hover to slide
</div>
In this example:
transition-transform
applies a transition to the transform property.duration-500
sets the duration to 500 milliseconds.ease-in-out
uses the ease-in-out timing function for the transition.
3. Delay
The delay
utility in Tailwind CSS specifies how long to wait before starting a transition. This is also specified in milliseconds. Tailwind provides several predefined delays, and you can customize these in the configuration file.
Default Delay Utilities
delay-75
: 75 millisecondsdelay-100
: 100 millisecondsdelay-150
: 150 millisecondsdelay-200
: 200 millisecondsdelay-300
: 300 millisecondsdelay-500
: 500 millisecondsdelay-700
: 700 millisecondsdelay-1000
: 1000 milliseconds
Example
<button class="transition-opacity delay-200 duration-500 hover:opacity-50">
Hover to fade
</button>
In this example:
transition-opacity
applies a transition to opacity.delay-200
specifies a 200-millisecond delay before the transition starts.duration-500
sets the duration to 500 milliseconds.hover:opacity-50
changes the opacity to 50% on hover.
4. Customizing Duration, Timing Functions, and Delay
You can extend or customize the default settings for duration, timing functions, and delay in your tailwind.config.js
file.
Example Configuration
module.exports = {
theme: {
extend: {
transitionDuration: {
'400': '400ms',
'600': '600ms',
},
transitionTimingFunction: {
'custom': 'cubic-bezier(0.42, 0, 0.58, 1)',
},
transitionDelay: {
'1000': '1000ms',
},
},
},
}
In this configuration:
transitionDuration
adds custom durations of 400ms and 600ms.transitionTimingFunction
adds a custom cubic-bezier timing function.transitionDelay
adds a custom delay of 1000ms.