demo · v139
Easing Library
Define a named-easing library with a single @function --ease(--name). Every component that needs a timing function calls --ease(back-out) or --ease(spring) — the curve is centralised, swappable, and inspectable.
Note CSS Custom Functions (
@function) ship in Chrome 139. The --_easing fallback below ensures the demo runs in older browsers with the same cubic-bezier values hard-coded.
Checking @function support…
@function --ease(--name: linear) {
result: if(
style(--name: linear): linear;
style(--name: back-in): cubic-bezier(0.36, 0, 0.66, -0.56);
style(--name: back-out): cubic-bezier(0.34, 1.56, 0.64, 1);
style(--name: spring): cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* … more named curves … */
else: ease
);
}
/* Use it anywhere a <easing-function> is accepted */
.card {
transition: transform 0.4s --ease(spring);
}
.modal {
animation-timing-function: --ease(back-out);
}