Mixins

kf-loop ([$number-of-times], $animation-map)

Loops the given animation map for the provided number of times.

If only a single parameter is passed, e.g. as kf-loop($animation-map) - then the animation will be looped indefinetly. If provided two parameters, e.g. as kf-loop(5, $animation-map) - the animation will be looped only for the given number of times.

.kf-loop-example {
  @include kf-loop((
    '.a': (margin-left: (0ms: 0%, 2s: 100%))
  ));
}

.kf-loop-example {
  max-width: 600px;
  width: 100%;
  .a {
    height: 20px;
    width: 20px;
    background: white;
    border: 1px solid black;
  }
}

<div class='kf-loop-example'>
  <div class='a'></div>
</div>

Edit

kf-lead

kf-mirror