Ceaser – CSS Easing Animation Tool
- Choose an easing type and test it out with a few effects.
- If you don’t quite like the easing, grab a handle and fix it.
- 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!
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.