3 min read
•Question 16 of 38mediumHow to add Transitions in Tailwind?
Animation and transition utilities.
What You'll Learn
- Transition properties
- Duration and timing
- Built-in animations
Basic Transitions
index.htmlHTML
<button class="transition hover:bg-blue-600">
Transitions all properties
</button>
<button class="transition-colors hover:bg-blue-600">
Only color transitions
</button>Transition Properties
| Class | Transitions |
|---|---|
| transition | all |
| transition-colors | colors only |
| transition-opacity | opacity only |
| transition-transform | transform only |
| transition-all | all properties |
Duration
index.htmlHTML
<div class="transition duration-150">150ms</div>
<div class="transition duration-300">300ms</div>
<div class="transition duration-500">500ms</div>Timing Function
index.htmlHTML
<div class="transition ease-in">Slow start</div>
<div class="transition ease-out">Slow end</div>
<div class="transition ease-in-out">Slow both</div>Built-in Animations
index.htmlHTML
<div class="animate-spin">Spinning</div>
<div class="animate-ping">Ping effect</div>
<div class="animate-pulse">Pulsing</div>
<div class="animate-bounce">Bouncing</div>