Mixins

kf ($animation-map)

Generates animation keyframes based on the provided animation map and assigns the generated keyframe animation to the selectors specified in the map.

.kf-example {
  $animation-map: ('div': (margin-left: (0ms: 0%, 2000ms: 100%)));

  @include kf($animation-map);
}

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

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

Edit

kf-chain