Mixins

kf-stretch ($stretch-duration, $animation-map)

Time stretches the given animation map by the given stretch-duration.

The provided $stretch-duration can be specified either as a new time value (e.g. 2s) or as a multiplier (e.g. 2). Both slowing down and speeding up animations works.

.kf-stretch-example {
  $a-animation: ('.a': (margin-left: (0ms: 0, 1000ms: 100%)));
  $b-animation: ('.b': (margin-left: (0ms: 0, 1000ms: 100%)));
  $c-animation: ('.c': (margin-left: (0ms: 0, 1000ms: 100%)));
  $d-animation: ('.d': (margin-left: (0ms: 0, 1000ms: 100%)));

  @include kf-parallel(
    kf-stretch(1.5s, $a-animation),
    kf-stretch(2500ms, $b-animation),
    kf-stretch(3, $c-animation),
    kf-stretch(5s, $d-animation),
  );
}

.kf-stretch-example {
  height: 40px;
  width: 100%;
  position: relative;
  $size: 10px;

  div {
    position: absolute;
    left: 0;
    top: 0;
    background: #888888;
    width: $size;
    height: $size;
    border: 1px solid #e8e8e8;
  }

  .b { top: 11px; }
  .c { top: 22px; }
  .d { top: 33px; }
}

<div class='kf-stretch-example'>
  <div class='a'></div>
  <div class='b'></div>
  <div class='c'></div>
  <div class='d'></div>
</div>

Edit

kf-stagger

kf-debug