Mixins

kf-sleep ($duration)

Does nothing for the provided duration. Used in the context of a kf-chain list of maps in order to provide a pauses between individual sequential animations.

.kf-sleep-example {
  $animation-a: ('div': ( margin-left: (0ms: 0, 1000ms: 50%)));
  $animation-b: ('div': ( margin-left: (0ms: 50%, 1000ms: 100%)));

  @include kf-chain(
    $animation-a,
    kf-sleep(2s),
    $animation-b
  );
}

.kf-sleep-example {
  height: 20px;
  width: 100%;
  position: relative;

  $size: 20px;

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

<div class='kf-sleep-example'>
  <div></div>
</div>

Edit

kf-reverse

kf-stagger