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
Time
Animation (%)

Code snippets, short and long-hand:

Resources

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

Let the good times roll!