Vivify – The Coolest New CSS Animation Library For Web Developers

It seems like every day there’s a new animation library and new tools for developers.

With CSS3’s popularity, I can totally understand why devs are building so many resources. One new library in particular stood out to me recently: Vivify.

10 CSS3 Animation Tools You Should Bookmark

10 CSS3 Animation Tools You Should Bookmark

As people tend to more easily perceive things that move, smartly used animations can enhance the user experience... Read more

This is a free animation library built on CSS, and it works kinda like Animate.css. However, it offers totally unique animations that you just won’t find anywhere else.

Vivify homepage example

Could you build these animations yourself from scratch? Certainly.

But it’ll take a lot of work, and it’s not the simplest process. I recommend working with something like Vivify because it saves time rather than reinventing the wheel.

You can see all their pre-built animation styles right on the homepage.

There you’ll also find a link to the GitHub repo where you can pull a copy of the latest script. Right now, all you need is the Vivify CSS file in your page header, and it should work like a charm.

With Vivify you can also set custom delays to your animations. This way, you can define when they should run and when the visitor sees them.

Or you could use JavaScript to dynamically add these classes onto your page elements once they come into view. Tons of options, lots of features, and plenty of room for customization.

Vivify animations list

To get started just visit the main GitHub and download the source code.

From there, you can test some of the demo files and even preview some of the samples on the main site. It’ll only take a few lines of code to get this working, and I guarantee you’ll love your new animations.