Skip to content

Instantly share code, notes, and snippets.

@bendc
Created September 23, 2016 04:12
Show Gist options
  • Save bendc/ac03faac0bf2aee25b49e5fd260a727d to your computer and use it in GitHub Desktop.
Save bendc/ac03faac0bf2aee25b49e5fd260a727d to your computer and use it in GitHub Desktop.
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);
}
@vojtabohm
Copy link

This is great!

May I ask what expo & circ refer to? I understand that quad through quint are exponents of an increasingly steeper polynomial which makes sense that the acceleration is ever increasing. But what about the last two?

Mind you that I have not watched the video so I apologize if it's answered in it.

@raphaelschaad
Copy link

"circ" is short for circular; the plot of the function looks like a quarter circle. You can visualize it with this tool: https://netcetera.org/camtf-playground.html

"expo" is a pretty steep exponential function. I'm unsure why these particular parameters have that name.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment