Motion Builder JS

A visual front-end for creating keyframe CSS animations quickly by hand. You tweak the values; it shows you the motion and generates the complete CSS and JS for you to use anywhere.

String up as many steps as you want to, select the trigger style and iterations.

To implement into your own site, just copy paste the generated code, and replace the target element with your own element.

Animation Timeline

Animation Preview

some text

Generated Code

Preview the animation to generate the code.