Mixins

kf-debug ($animation-map)

Provides a visual debugger showing each selector's property transition state at which timings they appear. Helpful in debuging whether animations are actually taking place. Utilizes the &:before psuedo-selector of the selector the mixin is called from. The kf-debug mixin should only be used at the top-level of the animation.

.kf-debug-example {
  $a-slide-animation: (
    '.a': (margin-left: (0ms: 0%, 500ms: 50%))
  );
  $b-slide-animation: (
    '.b': (margin-left: (0ms: calc(50% + 20px), 1s: 100%))
  );
  $b-blink-animation: (
    '.b': (background: (0ms: white, 0.1s: blue, 0.2s: white))
  );
  $animation-map: kf-stretch(2, kf-chain(
    $a-slide-animation,
    $b-slide-animation,
    $b-blink-animation,
    $b-blink-animation,
    $b-blink-animation
  ));

  @include kf-debug($animation-map);
}

.kf-debug-example {
  max-width: 600px;
  height: 50px;
  width: 100%;
  position: relative;
  .a, .b {
    position: absolute;
    height: 20px;
    width: 20px;
    background: white;
    border: 1px solid black;
  }
}

<div class='kf-debug-example'>
  <div class='a'></div>
  <div class='b'></div>
</div>

Edit

kf-stretch