ELEMENTS
Animations
CSS animation examples for your projects
Documentation
These animations use CSS keyframes and Tailwind's built-in animation utilities. Copy the CSS styles and apply the animation classes to your elements.
- - Tailwind built-in:
animate-spin,animate-ping,animate-pulse,animate-bounce - - Custom animations require the keyframe definitions in your CSS
- - Use
transition-*classes for hover effects
Tailwind Built-in
animate-spin
animate-ping
animate-pulse
animate-bounce
Custom Animations
Float
Shake
Rotate
Glow
Hover Effects
Loading Spinners
Spinner
Dashed
Gradient Animations
Transition Timing
Different easing functions (hover to see)
ease-linear
ease-in
ease-out
ease-in-out