Build Cool CSS Animations Easily with Animista

By Jake Rocheleau. in Toolkit. Updated on November 10, 2017.

There are tons of CSS animation web apps online. But, very few compare to the level of detail and ease of use you get with Animista.

This free web app lets you generate custom CSS animations at the click of a button. You select between pre-designed motions such as slides, transforms, swings, and even shadow drop animations.

Once you’ve created your animation, you can export the code just like with other CSS generators. Except, this code is much easier to work with and even comes with a built-in minifier tool.

The interface can feel confusing at first but that’s only because of how many options you have!

You build custom animations following three main steps and using the interface from top to bottom:

Pick a motion style (swing, slide, flip-scale) from the circles at the top
Customize it with different motion types underneath
Edit your animation options in the floating left-side options bar

Through this process, you can change the animation’s total duration, the easing style, the delay, pretty much everything. And it all works through pure CSS3, which makes it even more impressive.

Also note at the very top navbar you can even choose between different types of animation target styles.

The default is “basic” which can work on pretty much anything (hover, click, or immediate animation). Other targets include page text, background animations, and even custom entrance animations to bring a hidden page element into view.

I especially like the “attention” link at the top which has some cool shake & jitter effects for button styles. These work great on CTA buttons to grab attention and encourage user interactions.

Once you’re done making adjustments, you just click the little bracket icon in the top-right corner of the preview pane.

This brings a new page into view with your full CSS animation class, along with the keyframes. Optional features allow you to minify the code and include the auto-prefixer which supports older web browsers.

I’ve used tons of custom CSS animation tools and no doubt Animista is the most feature-rich tool out there. It’s totally free and a bit complex at first but once you understand the interface, it’s by far the best generator you can use.

To give it a try, just visit the homepage and click “Try me”. You can also share your thoughts & compliments with the web app’s creator @ana108.