Definition
Defining the speed of the animations make the transitions responsive and smooth. The right combination of duration and easing produces fluid and clear transitions. The factors below detail how duration should be adjusted to suit each animation.
duration--none
duration--fast 0.15
duration--normal 0.3
duration--slow 0.6
duration--sluggish 0.8999999999999999
/* -------------------------------------------------------------------------
* DURATIONS
*
* Define durations foundation
* The values here are for sample proposes, consider add your owns
*
*/
// Main duration
$f-duration: .3s !default;
// Duration variants
$f-duration--none: $f-duration * 0 !default;
$f-duration--fast: $f-duration / 2 !default;
$f-duration--normal: $f-duration !default;
$f-duration--slow: $f-duration * 2 !default;
$f-duration--sluggish: $f-duration * 3 !default;
// Durations map
$f-durations: (
"none": $f-duration--none,
"fast": $f-duration--fast,
"normal": $f-duration--normal,
"slow": $f-duration--slow,
"sluggish": $f-duration--sluggish,
) !default;