Want to keep the TNW Conference vibe going?? Tickets for TNW2022 are available now >>

The heart of tech

This article was published on March 23, 2011

    Caesar CSS3 easing tool makes transitions easier

    Caesar CSS3 easing tool makes transitions easier
    Joel Falconer
    Story by

    Joel Falconer

    Joel Falconer is the Features Editor at TNW. He lives on the Gold Coast, Australia with his wife and three kids and can sometimes be found g Joel Falconer is the Features Editor at TNW. He lives on the Gold Coast, Australia with his wife and three kids and can sometimes be found gaming or consulting. Follow Joel on Twitter.

    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.