With all modern browsers support CSS3 transitions ( including IE 9+ ), CSS3 transitions have been widely accepted by the designing community. CSS3 transitions are light and fast compared to the same transition functions in javascript.
Interestingly the javascript easing animations can be easily replicated using CSS3 , using the Cubic Bezier function. Not only this, using Cubic bezier you can create your own animation styles.
In case you are not aware of the know/how of CSS3 transitions here’s a link to know more about CSS3 transitions.
A lot of designers have started creating their own Cubic bezier functions, here are some of my favorite ones:
1. Easing Out Back : Standard easing one but one of my favorites : cubic-bezier(0.175, 0.885, 0.320, 1);
2. Pause and Go : Stops in the middle : cubic-bezier(0.765, 1.005, 0.260, -0.020)
3. Kick Back and Start : Starts with a kickback : cubic-bezier(0.815, -0.345, 0.305, 1.055)
4. Elegant ( Slow start & Slow end ) : Used by Kriesi in Themeforest Top seller : cubic-bezier(0.175, 0.885, 0.320, 1.275)
5. Kick Start and Ease out : cubic-bezier(0.775, -0.365, 0.255, 1.430)
There are a lot of tools out there to try out your own transition, here are couple of links where can try it out :
If you create something great do not forget to share it here 🙂
( v )