Animation Fill Code

Because You Should Only Have to Type it Once

The CSS3 Animations Module is still in the working draft stage. This means that in order to get the code to work, vendor prefixes are required.

After you write your code using WebKit, Mozilla, or IE10 syntax, use this tool to generate the necessary duplicate code with the appropriate vendor prefixes. The tool also adds the standard (prefix-less) syntax, declared last. If you don't want the standard syntax (which currently doesn't work in any browser), then just delete it.

Your starting code should be valid, working code that uses WebKit, Mozilla, or IE syntax. The tool doesn't support starting with prefix-less syntax. Browsers that support keyframe animations currently include Chrome 4+, Safari 4+, Firefox 5+, IE10+, iOS Safari 3.2+, and Android Browser 2.1+.

This tool was inspired by Prefixr, which you can use to add appropriate vendor prefixes for all sorts of CSS3 properties, including keyframe animations.

-webkit- -moz- -ms-
Fork me on GitHub