CSS 3 has some awesome new animation capabilities for web developers — rotating objects, fading them in and out and more — but writing the code is a bit more complicated than most CSS rules. To make your animating job a bit easier, developer Matthew Lein put together Ceaser, a handy code generator that outputs CSS snippets for animations.
Ceaser will look familiar to anyone who’s ever used Robert Penner’s easing equation in Flash (and later JQuery) since it includes approximations of most of Penner’s equations.
To use Ceaser, just pick a preset, set a time for the transition (the default is 500 milliseconds) and then pick a property to apply it to — width, height, opacity, etc. You can also create your own easing curve using the drag-and-drop graph tools. Once you’ve got everything working the way you’d like, just paste the CSS output into your stylesheet and you’re done.