Simple Animations
Understand animations and transitions for maneuvering items around the page via CSS properties.
We'll cover the following...
Tailwind does not provide a full implementation of CSS animation and transformation behavior. However, it does provide useful defaults for common behaviors. The Tailwind documentation admits that these are only suggestions and that most projects that use animation need to define custom behavior.
Utility
Tailwind provides four full animation utilities— .animate-spin, .animate-pulse, .animate-bounce, and .animate-ping. These classes define CSS animations and a set of keyframes to use on an element.
The first utility, .animate-spin, animates a full rotation of an object 360 degrees in one second. It’s designed to be used for things like a loading status marker. If we have an SVG or image we want to use, we add .animate-spin to the SVG or image element (not its container), and the element will rotate.
Another common load behavior is to display dummy elements and gradually replace them with data as the server provides it. The second ...