SCSS
@import "better-easing";
.foo {
transition: all 1s easing(circOut);
}
Output CSS
.foo {
transition: all 1s cubic-bezier(0, 0.56, 0.46, 1);
}
@charset "utf-8"; | |
/** | |
* Based on the article by zz85 | |
* http://www.lab4games.net/zz85/blog/2014/12/26/better-cubic-bezier-approximations-for-robert-penner-easing-equations/ | |
*/ | |
$better-easing-funcs: ( | |
quadIn: ( 0.26, 0, 0.6, 0.2 ), | |
quadOut: ( 0.4, 0.8, 0.74, 1 ), | |
quadInOut: ( 0.48, 0.04, 0.52, 0.96 ), | |
cuBicIn: ( 0.32, 0, 0.66, -0.02 ), | |
cuBicOut: ( 0.34, 1.02, 0.68, 1 ), | |
cuBicInOut: ( 0.62, -0.04, 0.38, 1.04 ), | |
quartIn: ( 0.46, 0, 0.74, -0.04 ), | |
quartOut: ( 0.26, 1.04, 0.54, 1 ), | |
quartInOut: ( 0.7, -0.1, 0.3, 1.1 ), | |
quintIn: ( 0.52, 0, 0.78, -0.1 ), | |
quintOut: ( 0.22, 1.1, 0.48, 1 ), | |
quintInOut: ( 0.76, -0.14, 0.24, 1.14 ), | |
sineIn: ( 0.32, 0, 0.6, 0.36 ), | |
sineOut: ( 0.4, 0.64, 0.68, 1 ), | |
sineInOut: ( 0.36, 0, 0.64, 1 ), | |
expoIn: ( 0.62, 0.02, 0.84, -0.08 ), | |
expoOut: ( 0.16, 1.08, 0.38, 0.98 ), | |
expoInOut: ( 0.84, -0.12, 0.16, 1.12 ), | |
circIn: ( 0.54, 0, 1, 0.44 ), | |
circOut: ( 0, 0.56, 0.46, 1 ), | |
circInOut: ( 0.88, 0.14, 0.12, 0.86 ) | |
); | |
@function easing($type) { | |
$fn-value: map-get($better-easing-funcs, unquote($type)); | |
@return cubic-bezier($fn-value); | |
} |