Ceaser CSS Easing Animation Tool

  1. Choose an easing type and test it out with a few effects.
  2. If you don’t quite like the easing, grab a handle and fix it.
  3. When you’re happy, snag your code and off you go.

Now that we can use CSS transitions in all the modern browsers, let’s make them pretty. I love the classic Penner equations with Flash and jQuery, so I included most of those. If you’re anything like me*, you probably thought this about the default easing options: “ease-in, ease-out...yawn.” The mysterious cubic-bezier has a lot of potential, but was cumbersome to use. Until now. Also, touch-device friendly!

*If you are anything like me, we should be friends @matthewlein

Note: Bugfixes have landed, so the newest Webkit now supports values above 1 and below 0. For the time being, I am including fallback code for older Webkit that is clamped between 0 and 1 when needed.

Animation (%)

Code snippets, short and long-hand:


Webkit/Safari/Chrome desicion-makers: Hoping Bug 45761 gets fixed/implemented soon so I can add easeBack effects.

Let the good times roll!

Your browser does not support CSS transitions. Firefox 4, Safari & Chrome have what it takes.