Transitions

For simple animations, you can use transition properties when you need objects to change position on certain events.

Transitions

• transition(-TYP)
  • TYP
    
    none all colors opacity shadow transform

Docs Try it

You can choose to have Tailwind transition to create smooth animations between states on different types of properties. You can use transition without any other properties, in which case it will let you transition on all the properties shown here.

Or you can use use transition-all, which sets the transition property to all. Similar, but will let you catch any other transitions you're doing manually.

Transition Duration

• duration(-TYP)
  • AMT
    
    75 100 150 200 300 500 700 1000

Docs Try it

Duration controls how long the transition takes to play.

The numbers are in milliseconds so 500 is half a second.

Transition Delay

• delay(-TYP)
  • AMT
    
    75 100 150 200 300 500 700 1000

Docs Try it

Similar to the transition duration, the delay lets you control how long to wait before the animation starts playing.

The numbers are in milliseconds so 1000 is a full second.

Transition Timing Function

• ease(-TYP)
  • TYP
    
    linear in out in-out

Docs Try it

Similar to the transition duration, the delay lets you control how long to delay an animation.