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.
Read Also: 30 Cool CSS Animations You Have To See
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.