After messing around with CSS3 keyframe animations for a few months now, I realized (as is the case with most CSS3 stuff) repeating the code can be annoying.
For CSS3 animations, it’s worse. You have to write sometimes dozens of lines of code for a single rendering engine (I always start with WebKit) then copy all the code two more times, then change the prefixes to get it to work in another rendering engine (in this case Gecko/Firefox) and have a standard equivalent.
After a quick search, there didn’t seem to be a tool to do this (other than whatever find-and-replace functionality you have in your text editor), so I wrote one myself. It’s called Animation Fill Code (a play on words on the animation-fill-mode property).
Although my idea for this came about mainly from messing around with CSS3 animations, the concept was definitely inspired by Prefixr, created by Jeffrey Way of Nettuts+. Prefixr adds the necessary equivalent code for all browsers for a number of CSS3 properties, but not for keyframe animations.
Having been thought up, designed, and built in less than half a day, Animation Fill Code is a pretty straightforward tool, and is somewhat limited. For example, you can input code that has either WebKit or Mozilla syntax, and it will add the two missing equivalents. But you can’t start with non-prefixed code, and add the prefixes. Also, you have to tell the app (using a radio button option) what version of the code you’re starting with.
Go ahead and check it out, and if you see any bugs or have any suggestions, feel free to post them here. If you need some quick WebKit-only code to copy and paste, you can use the code found on this demo.