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 milliseconds
  • duration-100: 100 milliseconds
  • duration-150: 150 milliseconds
  • duration-200: 200 milliseconds
  • duration-300: 300 milliseconds
  • duration-500: 500 milliseconds
  • duration-700: 700 milliseconds
  • duration-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 milliseconds
  • delay-100: 100 milliseconds
  • delay-150: 150 milliseconds
  • delay-200: 200 milliseconds
  • delay-300: 300 milliseconds
  • delay-500: 500 milliseconds
  • delay-700: 700 milliseconds
  • delay-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.