kf-reverse ($animation-map)

Runs the given animation map in the reverse direction. End property value and timing transition to start values and timings.

.kf-reverse-example {
  $normal-direction-animation: (
    'div': (
      background: (0ms: red, 500ms: white, 1000ms: blue),
      margin-left: (0ms: 0%, 1000ms: 25%, 1500ms: 100%)
  @include kf-reverse($normal-direction-animation);
.kf-reverse-example {
  height: 20px;
  width: 100%;
  position: relative;

  $size: 20px;

  div {
    position: absolute;
    left: 0;
    top: 0;
    background: white;
    width: $size;
    height: $size;
    border: 1px solid #e8e8e8;
<div class='kf-reverse-example'>