File Under: CSS

Quickly Create CSS 3 Animations with ‘Ceaser’

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.

CSS 3 transitions work in any modern browser. For browsers that don’t understand transitions (I’m looking at you IE 9) you’ll need to fallback to JavaScript. Using Modernizr you can detect support for CSS 3 and then serve up some JS transitions to browsers that don’t support it. If you’re only worried about IE, you could try using IE’s proprietary filters, though be aware that most MS filter properties have a heavy overhead and can slow down pages considerably.

See Also: