sunweb

Durations

foundations animation durations

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;