Helpful Small Animations
Tailwind provides four full animation utilities: animate-bounce, animate-ping, animate-pulse, and animate-spin. These classes define both the CSS for an animation and a set of keyframes, so you can use them on an element as is.
The first utility, animate-bounce, describes a one-second transition translating the vertical position down by 25% of the size of the element and then back to the original position, so it gives a slight downward bounce. For example, you could use hover:animate-bounce to give a nice “you are here” effect.
You can give a notification effect a little animation with the second utility, animate-ping, which is a one-second animation from regular size and opacity to twice the size and 0 opacity, which ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access