Timing Functions
Easing or "cushioning". The best is cubic-bezier. you can customise your easing.
- 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)
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