What is this?

Did you see the animated rectangle above?  Is it JavaScript?  Nope.  It's hardware accelerated CSS3 keyframes generated from the configuration below.  This generator enables 12 additional easing functions that aren't supported by the w3c spec.  How cool is that?

Works with:


Enter a name which will be used to label the keyframes and the class name.  Enter a template string which will be used for each keyframe.  The integer mustache tags (e.g. {0} and {1}) will be replaced with numeric values for each keyframe.  If you place {p} anywhere inside the template, it will be replaced with a vendor specific prefix such as -webkit-, -moz-, or -ms-.

Next, you need to define the start and finish values for each property.  For the animated rectangle at the top of this page, the opacity started at 0 and ended at 1, the x translation started at 0 and ended at 500, and the width started at 50 and ended at 100.  Select an easing type, define a duration in seconds, and then press the "Generate" button.  Copy and paste the generated code into your CSS file and you're done!


CSS Code