Mixins

kf-ease ($easing, $animation-map)

Applies the specified easing to the given animation map. This easing may be any standard CSS animation-timing-function. For example linear, ease-in-out or cubic-bezier(0,1,1,0) are all valid easing values.

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

  @include kf-ease(ease-in-out, $animation-map);
}

.kf-ease-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-ease-example'>
  <div></div>
</div>

Edit

kf-chain

kf-lag