For years, my go-to recommendation for CSS animations was animate.css by Daniel Eden.

It’s a great library, but it also a library. I generally only need one or two animations, and it includes way more stuff than I typically want in a project.

So I was delighted to discover Animista by Ana Travis last week. Animista is a tool that lets you select the animation you want, and then copy/paste the CSS for it into your project. That’s exactly the kind of workflow I want for stuff like this!

Today, let’s look at how to use it.

Some HTML #

Getting the animation CSS #

Adding the animation to the button #

Making the animation run more than once #

Important accessibility concerns #

Abstracting adding an animation #

Adding a callback after the event #

#css