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 in all browsers, vendor prefixes are required.

After you write your code using WebKit, Mozilla, or Opera syntax, Animation Fill Code will generate the necessary duplicate code with the appropriate vendor prefixes. The tool also adds the standard (prefix-less) syntax, declared last.

The -ms- prefix is now removed from this tool. IE10 will support CSS3 animations without prefixes so the vendor prefix for IE is not needed for any code, even for backwards compatibility, since IE9 never supported it.

Your starting code should be valid, working code that uses a single vendor prefix. The tool doesn't support starting with prefix-less syntax, but this will change when stable browsers start to support the prefix-less syntax. Browsers that support keyframe animations currently include Chrome, Safari 4+, Firefox 5+, IE10+, Opera 12+, 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.

Fork me on GitHub