Caesar CSS3 easing tool makes transitions easier

Caesar is a CSS3 easing animation tool that makes customizing your transitions with precision much easier.

Transitions are one of the exciting new features introduced by the CSS3 specification, allowing designers to animate elements of the page–whether it’s a smoother color transition for hover events, or something more extreme like moving, scaling or rotating page elements.

These transitions use easing equations to determine how they should fade in and out, but CSS offers only a few default equations with the cubic-bezier attribute available to those who want more control. Unfortunately, with syntax like this, the cubic bezier attribute is a pain to work with:

transition: all 500ms cubic-bezier(1.000, 0.000, 0.000, 1.000);

With Caesar, you simply select an easing equation from the menu as a starting point, and tweak the bezier curve with your mouse. You can test a variety of transitions — element position, width, height and opacity transitions — on the page and copy the CSS3 code when you’re satisfied with the results.

The tool’s developer, Matthew Lein, has included a bunch of presets known as the Penner Equations that have long been popular in Flash and jQuery easing.

The most recent versions of Webkit and Gecko support CSS3 transitions, so users of Firefox 4, Safari and Chrome will be able to see transition effects while Internet Explorer users, even those using IE9, will not. As always, graceful degradation is a must.