Skip to content

Instantly share code, notes, and snippets.

@patrickmatte
Last active May 8, 2024 10:20
Show Gist options
  • Save patrickmatte/ed2ae277172c0c5d084a9e3e733bb415 to your computer and use it in GitHub Desktop.
Save patrickmatte/ed2ae277172c0c5d084a9e3e733bb415 to your computer and use it in GitHub Desktop.
CSS easing methods based on Robert Penner's, as accurate as possible to do with cubic-bezier
$easeLinear: cubic-bezier(0, 0, 1, 1);
$easeSineInOut: cubic-bezier(0.37, 0, 0.63, 1);
$easeSineIn: cubic-bezier(0.12, 0, 0.39, 0);
$easeSineOut: cubic-bezier(0.61, 1, 0.88, 1);
$easeQuadraticInOut: cubic-bezier(0.45, 0, 0.55, 1);
$easeQuadraticIn: cubic-bezier(0.11, 0, 0.5, 0);
$easeQuadraticOut: cubic-bezier(0.5, 1, 0.89, 1);
$easeCubicInOut: cubic-bezier(0.65, 0, 0.35, 1);
$easeCubicIn: cubic-bezier(0.32, 0, 0.67, 0);
$easeCubicOut: cubic-bezier(0.33, 1, 0.68, 1);
$easeQuarticInOut: cubic-bezier(0.76, 0, 0.24, 1);
$easeQuarticIn: cubic-bezier(0.5, 0, 0.75, 0);
$easeQuarticOut: cubic-bezier(0.25, 1, 0.5, 1);
$easeQuinticInOut: cubic-bezier(0.83, 0, 0.17, 1);
$easeQuinticIn: cubic-bezier(0.64, 0, 0.78, 0);
$easeQuinticOut: cubic-bezier(0.22, 1, 0.36, 1);
$easeExponentialInOut: cubic-bezier(0.87, 0, 0.13, 1);
$easeExponentialIn: cubic-bezier(0.7, 0, 0.84, 0);
$easeExponentialOut: cubic-bezier(0.16, 1, 0.3, 1);
$easeBackInOut: cubic-bezier(0.68, -0.6, 0.32, 1.6);
$easeBackIn: cubic-bezier(0.36, 0, 0.66, -0.56);
$easeBackOut: cubic-bezier(0.34, 1.56, 0.64, 1);
$easeCircularInOut: cubic-bezier(0.85, 0, 0.15, 1);
$easeCircularIn: cubic-bezier(0.55, 0, 1, 0.45);
$easeCircularOut: cubic-bezier(0, 0.55, 0.45, 1);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment