{"id":38061,"date":"2017-09-18T21:01:33","date_gmt":"2017-09-18T13:01:33","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=38061"},"modified":"2020-06-27T02:38:31","modified_gmt":"2020-06-26T18:38:31","slug":"stylie-animation-builder","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/stylie-animation-builder\/","title":{"rendered":"Stylie – A Free CSS Web Animation Builder"},"content":{"rendered":"

If you struggle with CSS3 syntax<\/a> and want a simple way to create animations<\/strong> Stylie<\/a><\/strong> is a great tool to save.<\/p>\n

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

The Rekapi library does use JavaScript<\/strong>, so it\u2019s 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<\/strong>.<\/p>\n

By default, the first page loads a continual animation demo with a linear animation. You can play with this by editing the default settings<\/strong> in the Motion tab<\/strong> or by editing the Keyframes tab<\/strong>.<\/p>\n

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

Read Also:<\/strong> 10 CSS3 Animation Tools You Should Bookmark<\/a><\/p>\n

First, this will look extremely confusing<\/em>, especially if you\u2019ve never done keyframe animation before. However, the more you play with this application the more it makes sense.<\/p>\n

By default, you\u2019ll have a ton of different easing options<\/strong> to mess with and they\u2019re all super easy to customize.<\/p>\n

The Motion graph<\/strong> 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<\/strong> and reuse these<\/strong> in the Keyframes tab for other animations.<\/p>\n

\"Stylie<\/a><\/figure>\n

If I could complain about one thing it\u2019s the web app\u2019s lack of responsive design<\/a><\/strong>.<\/p>\n

I couldn\u2019t get the entire app to fit onto my 13\u2033 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.<\/p>\n

But aside from this minor annoyance, I got it working just fine on my larger monitor. And, the export quality<\/strong> is like nothing else you\u2019ll find on the web.<\/p>\n

Take a peek at the Stylie app<\/a> 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<\/strong> and use that for any project you like.<\/p>\n

If you\u2019re having trouble learning the interface you can also watch this brief tutorial<\/a> spanning about 9 minutes long and covering all the major features.<\/p>\n