Entry 02

Motion tokens

Use them in every transition and animation. Two easing curves, defined once, and a rule for durations.

Toggle the dropdown. It fades over 180ms on --ease-out. Then run the curves. The --ease-out square leaves faster than plain ease-out and settles for longer. The --ease-in-out square waits longer than plain ease-in-out, then crosses the middle faster.

Code CSS · 6 lines

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

.dropdown { transition: opacity 180ms var(--ease-out); }

Why it works, the rules and the credits 3 reasons · 5 rules · support · credits

Why it works

An ease-out curve starts fast, so the interface moves at the moment the user is watching. Use --ease-out for anything entering or leaving.
An ease-in-out curve suits something that is already on screen and moves to a new place. Use --ease-in-out there.
The built-in ease-out and ease-in-out keywords are weak versions of the same shapes. These two are stronger.

Rules

Never use ease-in on UI. It starts slow and reads as lag.
Keep a UI transition at 300ms or less. Press feedback takes 100 to 160ms, tooltips and small popovers 125 to 200ms, dropdowns 150 to 250ms. The one exception is a modal or drawer, which takes 200 to 500ms.
Name the properties in a transition. Never write transition: all.
Other entries write var(--ease-out, ease-out), so their snippets work before these tokens exist.
Whether something should animate at all is not a CSS question. Emil Kowalski's animate and review-animations skills answer it.

Support

Every browser.

Credits

Borrowed from: Emil Kowalski, emil-design-eng skill and 7 Practical Animation Tips