Timing Functions

In notebook:
FrontEndMasters Motion Design with CSS
Created at:
2016-10-18
Updated:
2016-10-18
Tags:
css animation
Easing or "cushioning". 
  • decelerate → ease-out
  • accelerate → ease-in
  • linear (constant rate of change : very rare in nature)
  • ease-in-out (starts and ends slowly)
  • steps (more on this later)
Trick to remember is to replace the word ease by slow. 
The best is cubic-bezier. you can customise your easing. 
cubic-bezier.com to generate the CSS values. Or use the dev tools in Chrome or Firefox. 

She prefers Firefox a little bit for animations. 

In Chrome: you can click just before the CSS rule transition rule to open up the editor. 
In Firefox: same, in the CSS rule you can click a little icon to bring up the panel. You get a more complete editor and presets. 

Example: crop the block (.com) has a great custom easing.

easings.net - examples of easings