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!
*If you are anything like me, we should be friends @matthewleinNote: 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.
Code snippets, short and long-hand:
-webkit-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
-moz-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
-o-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
-moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
-o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
If this saves you time, or blows your mind, consider making a donation to keep these projects alive.
Resources
- Very nice overview of CSS Transitions and Animation: css3.bradshawenterprises.com/
- Jared Hardy’s Ceaser Compass extension: github.com/jhardy/comp…
- Excellent CSS3 LESS mixin by Matthew Wagerfield: github.com/MatthewWage…
- Ceaser TextMate Bundle: github.com/matthewlein…
- LESS easing by Kirk Strobeck github.com/kirkstrobec…
- Ceaser cubic bezier’s in JS/LESS/SASS for plugin/mixin developers
- AppMobi did a simple how-to video for Ceaser on Youtube
- -ms- prefix was never really needed
Webkit/Safari/Chrome desicion-makers: Hoping Bug 45761 gets fixed/implemented soon so I can add easeBack effects.
Let the good times roll!
