Skip to content

Instantly share code, notes, and snippets.

@amadeus
Created May 20, 2011 17:24
Show Gist options
  • Save amadeus/983364 to your computer and use it in GitHub Desktop.
Save amadeus/983364 to your computer and use it in GitHub Desktop.
Penner's easing methods in CSS
'linear:in': cubic-bezier(0,0,1,1)
'linear:out': cubic-bezier(0,0,1,1)
'linear:in:out': cubic-bezier(0,0,1,1)
'expo:in': cubic-bezier(0.71,0.01,0.83,0)
'expo:out': cubic-bezier(0.14,1,0.32,0.99)
'expo:in:out': cubic-bezier(0.85,0,0.15,1)
'circ:in': cubic-bezier(0.34,0,0.96,0.23)
'circ:out': cubic-bezier(0,0.5,0.37,0.98)
'circ:in:out': cubic-bezier(0.88,0.1,0.12,0.9)
'sine:in': cubic-bezier(0.22,0.04,0.36,0)
'sine:out': cubic-bezier(0.04,0,0.5,1)
'sine:in:out': cubic-bezier(0.37,0.01,0.63,1)
'quad:in': cubic-bezier(0.14,0.01,0.49,0)
'quad:out': cubic-bezier(0.01,0,0.43,1)
'quad:in:out': cubic-bezier(0.47,0.04,0.53,0.96)
'cubic:in': cubic-bezier(0.35,0,0.65,0)
'cubic:out': cubic-bezier(0.09,0.25,0.24,1)
'cubic:in:out': cubic-bezier(0.66,0,0.34,1)
'quart:in': cubic-bezier(0.69,0,0.76,0.17)
'quart:out': cubic-bezier(0.26,0.96,0.44,1)
'quart:in:out': cubic-bezier(0.76,0,0.24,1)
'quint:in': cubic-bezier(0.64,0,0.78,0)
'quint:out': cubic-bezier(0.22,1,0.35,1)
'quint:in:out': cubic-bezier(0.9,0,0.1,1)
Can be used like so:
-webkit-transition: -webkit-transform 100ms cubic-bezier(0.9,0,0.1,1);
@patrickmatte
Copy link

'back:in:out': cubic-bezier(0.68, -0.6, 0.32, 1.6);
'back:in': cubic-bezier(0.36, 0, 0.66, -0.56);
'back:out': cubic-bezier(0.34, 1.56, 0.64, 1);

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