Mixins

kf-chain ($animation-map, ...)

Chains two or more animations to run sequentially. Once the first completes, the second starts, and so on and so forth. Any number of animation maps may be passed as arguments.

To place intermediate pauses between animations, use kf-sleep.

.kf-chain-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))
  );

  @include kf-chain(
    $a-slide-animation,
    $b-slide-animation,
    $b-blink-animation,
    $b-blink-animation,
    $b-blink-animation
  );
}

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

Edit

kf-ease