Stylie – A Free CSS Web Animation Builder

By Jake Rocheleau. in Toolkit. Updated on June 27, 2020.

If you struggle with CSS3 syntax and want a simple way to create animations Stylie is a great tool to save.

This is one of many free code generators with a focus on pure CSS animated effects. Stylie is totally free and open-sourced, hosted on GitHub and powered by a keyframe library called Rekapi.

The Rekapi library does use JavaScript, so it’s an alternative to pure CSS. And thankfully, the Stylie web app supports both methods, so you can export code in either pure CSS or JavaScript.

By default, the first page loads a continual animation demo with a linear animation. You can play with this by editing the default settings in the Motion tab or by editing the Keyframes tab.

In the keyframes list, you can add new keyframes, edit their total duration, and change the animation styles, including movements based on the X/Y axis.

First, this will look extremely confusing, especially if you’ve never done keyframe animation before. However, the more you play with this application the more it makes sense.

By default, you’ll have a ton of different easing options to mess with and they’re all super easy to customize.

The Motion graph is a lot tougher to learn but it gives you far more control over your animation easing. Stylie even lets you save custom motion effects and reuse these in the Keyframes tab for other animations.

If I could complain about one thing it’s the web app’s lack of responsive design.

I couldn’t get the entire app to fit onto my 13″ MacBook Pro screen even with the browser fully maximized. This can be an issue since the page does not have a vertical scrollbar and many of the options (like exported code) are found lower in the settings pane.

But aside from this minor annoyance, I got it working just fine on my larger monitor. And, the export quality is like nothing else you’ll find on the web.

Take a peek at the Stylie app to see how it works and try fiddling with some of the options. Once you make your animation, you can export the CSS or the JavaScript and use that for any project you like.

If you’re having trouble learning the interface you can also watch this brief tutorial spanning about 9 minutes long and covering all the major features.