Easings

• Describes the rate an animation changes between keyframes.
• CSS provides a set of defaults and custom easing curves can be created by using the cubic-bezierfunction.
• Easings are the main factor that affects how animations feel, and affects how fast interfaces feel.

Easings can affect how fast and snappy an application feels. The duration here is the same, although ease-out opening feels faster.

Selecting Easings

Easing	Great for	Why
ease-out	user-initiated enter and exit interactions	The acceleration at the beginning gives the user a feeling of responsiveness.
ease-in-out	Anything already on screen that needs to move or morph	Starts slowly, speeds up and then slows down towards the end, like a car. This makes it great to look at.
ease-in		Starts slow and ends fast. Should be generally avoided as it can make interfaces feel sluggish.
linear	loading spinners, other continuous animations with no user interaction	Constant speed movement. Should be generally avoided as it can make interfaces feel robotic and unnatural.
ease	hover effects that transition color, background-color, opacity etc.	Asymmetrical ease-in-out curve.

In the case below, linear animation (first) feels robotic when compared to custom easing (second).

Recommended Custom Easings

• A set of custom easings by Benjamin De Cock that replace the easings above to provide stronger acceleration.
• These are generally preferred over the default easings (with the exception of {css} ease) as the defaults don't provide strong enough acceleration in most cases.
• Sorted from the weakest to the strongest acceleration for each type of easing.

:root {
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
  --ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
  --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
  --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
  --ease-in-circ: cubic-bezier(.6, .04, .98, .335);
 
  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-out-circ: cubic-bezier(.075, .82, .165, 1);
 
  --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
  --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);