Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Easing CSS variables
: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);
}
@bendc

This comment has been minimized.

Copy link
Owner Author

@bendc bendc commented Sep 23, 2016

@raphaelschaad

This comment has been minimized.

Copy link

@raphaelschaad raphaelschaad commented Oct 2, 2020

Ref.: Benjamin De Cock | Motion & Playfulness | UX Special, CSS Day 2018 @ 26:38

  • "Don't rely on the built-in easing curves as the accelerations are not strong enough."
  • "Most of the time an easy-out curve […] will be the best choice because the animation will kick off immediately."
  • "ease-in-out can be an appropriate choice when you're moving something that is already on screen."
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.