But how should you get started? Some developers like to write their animations from scratch. But others use online tools to generate custom animation code.
In this post I’ll share a few of these tools which generate code to help you animate your website without reinventing the wheel.
CSS Hero Animator
This is a free download and it’s very powerful for WP users who don’t like to write code. While in the Animator editor you simply click any page element to select it. Then you customize your animation options to set loops, speed, and timing.
As of right now this plugin is only available for WordPress. It would be great to have this as a standalone tool to generate custom animations for any site, but it’s just as useful on WordPress too.
If you’re looking for a more typical webapp generator then check out CSS Animate. This tool generates code for your own custom animations which rely on keyframes.
Multiple panels allow for various customizations like scale, opacity, duration, and element position. There’s even a timeline panel for you to edit different markers and to play/pause the animation at will.
This is one of the best keyframe animation tools on the web. It’s completely free and offers everything you’d need to generate a useable keyframe animation.
I will admit the learning curve is a bit steep at first. But once you play around with the features you’ll quickly learn how it works and how to create tangible animations for your projects.
Yet another basic CSS animation tool is Stylie created by Jeremy Kahn. I actually prefer this interface a little more because it’s so much cleaner.
The customization features are hidden behind tabbed boxes off to the side of the page, causing more steps during the animation process. But I also feel the learning curve is much easier to follow than CSS Animate.
Stylie was released for free as an open source project on GitHub. The webapp is hosted on GitHub pages but you can also download a copy to use locally.
And you can even watch a free screencast tutorial explaining how Stylie works. That’s pretty darn cool in my book.
Stylie is undeniably one of the best keyframe animation tools on the web. It’s just so simple and intuitive that it’s perfect for developers and webmasters alike.
Since it does have a separate JS file you need to include the library into your website before animations happen. But the online BounceJS tool also makes it super easy to generate raw JS/CSS animation code.
After first landing on the page you’ll be greeted with multiple bouncing animations. These rely on Bounce.js offset properties to delay animations for a certain period of time. You can edit everything from the “Add Component” button in the top-left corner.
Pre-built easings are available to help you along the way. Sticky-style bounce animations are very popular and they’re perfect for modern web interfaces.
If you’re looking for a way to repeat animations with custom delays then check out WAIT! Animate. This free tool generates CSS code to help you control how certain elements animate on the page.
By default it’s possible to offset CSS animations before they run, but not between loops of the same animation. The point of WAIT! Animate is to solve this problem.
Now you can generate animations that run continuously with a delay in the middle each time. It may not be valuable for every project but it’s definitely a powerful tool in your web animation arsenal.
Cubic Bezier Generator
Modern web animations can be customized on top of the cubic-bezier() method. This is rather complicated to work with unless you have some expertise in CSS animation.
But thankfully there’s an easier way to do this with the Cubic Bezier webapp. It gives you all the tools you need to edit custom animations based on a bezier curve.
You can select from default animations or customize your own by dragging the bezier handles. It’s a fun little webapp to help you create very basic CSS transition animations.
Angry Tools Animation Kit
This Animation Kit is one more handy CSS tool for web development. It’s completely free and allows you to generate CSS code from scratch with defined animation presets.
This way you can add custom animations onto just about anything. You get access to delays, timing functions, durations, and lots of other simple CSS animation properties.
The live preview window shows all your edits in real time. You also get code output windows for the HTML/CSS code to copy and paste into your project.
All of these tools are simply incredible for building custom CSS animations from scratch. It’s amazing to see how much is possible with free webapps.
And if you’re looking for more web animation resources then check out these related posts.