Animations
htmx allows you to use CSS transitions to animate many parts of the request-response cycle. Below are a few examples of how you can use htmx to trigger animations.
Color Change
Click the box to change its color using a CSS transition.
Click Me!
Fade Out on Swap
Click the button to fade out the element before it is removed.
I will fade out when you click the button.
Fade In on Addition
New content fades in smoothly.
Slide and Expand
Content slides down when added.
Crossfade Swap
Seamlessly transition between old and new content.
Initial Content
Validation Shake
Enter "invalid" to see the shake animation.
Indicator Morphing
The button morphs into a spinner during the request.
Request in Flight (Settling)
This example shows how to use the htmx-settling class to highlight new content.