Mixins

kf-stagger ($delta-duration, $animation-map, ...)

Staggers animations one after another based on provided a delta duration. The provided delta duration can be negative or positive. Any number of animation maps may be provided as arguments.

.kf-stagger-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.25s: blue, 0.5s: white))
  );

  @include kf-stagger(
    -300ms,
    $a-slide-animation,
    $b-slide-animation,
    $b-blink-animation
  );
}

.kf-stagger-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-stagger-example'>
  <div class='a'></div>
  <div class='b'></div>
</div>

Edit

kf-sleep

kf-stretch