mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
79 lines
2.6 KiB
SCSS
79 lines
2.6 KiB
SCSS
// ==========================================================================
|
|
// Settings / Config / Eases
|
|
// ==========================================================================
|
|
|
|
// Eases
|
|
// ==========================================================================
|
|
|
|
$eases: (
|
|
// Power 1
|
|
"power1.in": cubic-bezier(0.550, 0.085, 0.680, 0.530),
|
|
"power1.out": cubic-bezier(0.250, 0.460, 0.450, 0.940),
|
|
"power1.inOut": cubic-bezier(0.455, 0.030, 0.515, 0.955),
|
|
|
|
// Power 2
|
|
"power2.in": cubic-bezier(0.550, 0.055, 0.675, 0.190),
|
|
"power2.out": cubic-bezier(0.215, 0.610, 0.355, 1.000),
|
|
"power2.inOut": cubic-bezier(0.645, 0.045, 0.355, 1.000),
|
|
|
|
// Power 3
|
|
"power3.in": cubic-bezier(0.895, 0.030, 0.685, 0.220),
|
|
"power3.out": cubic-bezier(0.165, 0.840, 0.440, 1.000),
|
|
"power3.inOut": cubic-bezier(0.770, 0.000, 0.175, 1.000),
|
|
|
|
// Power 4
|
|
"power4.in": cubic-bezier(0.755, 0.050, 0.855, 0.060),
|
|
"power4.out": cubic-bezier(0.230, 1.000, 0.320, 1.000),
|
|
"power4.inOut": cubic-bezier(0.860, 0.000, 0.070, 1.000),
|
|
|
|
// Expo
|
|
"expo.in": cubic-bezier(0.950, 0.050, 0.795, 0.035),
|
|
"expo.out": cubic-bezier(0.190, 1.000, 0.220, 1.000),
|
|
"expo.inOut": cubic-bezier(1.000, 0.000, 0.000, 1.000),
|
|
|
|
// Back
|
|
"back.in": cubic-bezier(0.600, -0.280, 0.735, 0.045),
|
|
"back.out": cubic-bezier(0.175, 00.885, 0.320, 1.275),
|
|
"back.inOut": cubic-bezier(0.680, -0.550, 0.265, 1.550),
|
|
|
|
// Sine
|
|
"sine.in": cubic-bezier(0.470, 0.000, 0.745, 0.715),
|
|
"sine.out": cubic-bezier(0.390, 0.575, 0.565, 1.000),
|
|
"sine.inOut": cubic-bezier(0.445, 0.050, 0.550, 0.950),
|
|
|
|
// Circ
|
|
"circ.in": cubic-bezier(0.600, 0.040, 0.980, 0.335),
|
|
"circ.out": cubic-bezier(0.075, 0.820, 0.165, 1.000),
|
|
"circ.inOut": cubic-bezier(0.785, 0.135, 0.150, 0.860),
|
|
|
|
// Misc
|
|
"bounce": cubic-bezier(0.17, 0.67, 0.3, 1.33),
|
|
"slow.out": cubic-bezier(.04,1.15,0.4,.99),
|
|
"smooth": cubic-bezier(0.380, 0.005, 0.215, 1),
|
|
);
|
|
|
|
// Default value for ease()
|
|
$ease-default: "power2.out" !default;
|
|
|
|
// Function
|
|
// ==========================================================================
|
|
|
|
// Returns ease curve.
|
|
//
|
|
// ```scss
|
|
// .c-box {
|
|
// transition-timing-function: ease("power2.out");
|
|
// }
|
|
// ```
|
|
//
|
|
// @param {string} $key - The ease key in $eases.
|
|
// @return {easing-function}
|
|
|
|
@function ease($key: $ease-default) {
|
|
@if not map-has-key($eases, $key) {
|
|
@error "Unknown '#{$key}' in $eases.";
|
|
}
|
|
|
|
@return map-get($eases, $key);
|
|
}
|