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.
cool, it make the coding easier.
But i hope you will include to the animation element to
If you’re referring to the shorthand, yes, it does support that. The JavaScript that creates the code is pretty simple. It’s doing a few searches for certain aspects of the animation code (to make sure it’s real animation code), then it just duplicates whatever is there.
Also, I would put the standard (no prefix) property last, not first.
It might be useful to put the possible codes on either side of the entry box. Put the webkit ones on one side and the mox on the other.. also allowing us to click on which one we want and having it entered would be cool..
How many keyframe animation calls are there?
Hmmm.. That’s an interesting idea. So you mean, not only would it convert existing code, but it could produce a sort of template for new code?
Yeah, I suppose that could be added. I’ll see what I can do.
Also, I’m not sure what you mean by animation calls..? I don’t understand your question there. Keep in mind that this tool only converts existing webkit- or moz-only code. That is, you create the webkit (or moz) code, then put it into the tool, and it creates the rest of the code for you, so you don’t have to copy and paste and rewrite the prefixes. So it doesn’t create any code for you.