This Simple Tool Makes CSS Animations Easy

I’ve been creating CSS Animations for the past 10 years. My love for, and obsession with, animated SVG graphics started with a project for Lego. My specialty in web-based animated graphics was required for a relatively simple animation showing the drag, resize, and rotate features of their new Poster Builder. The animation needed to be short and easily communicate the simple functionality, but needed to be controlled with CSS. This posed a challenge, how do I work with a creative team to tweak animation timings when the way CSS Keyframes work are so rigid.

Enter Animation Builder

Leveraging my extensive experience with Adobe Animate, as an animation sequencing tool, and my knack for creating custom integrations, I developed a codebase that would look at the placement of keyframes in an animation, and calculate out the percentage values for the CSS Keyframe rules.

Matrix Transforms and CSS

A matrix transformation is a single property that describes the position, size, skew, and rotation all in the same property. Fortunately Adobe Animate’s native language, ActionScript 3, uses the same matrix transform syntax as CSS. At each keyframe position the matrix transform of an element can be recorded, allowing for a smooth transition between values.

Another helpful point is that when you export an SVG from adobe animate, it will name the elements with an ID property that is the same as the symbol’s instance name. This makes targeting the right elements possible between Animate and CSS.

Animation Builder gives you the CSS code you need to playback your animation just like how you created it in Animate.

Code Repo

https://github.com/motionharvest/Animation-Builder