Mixins

kf-mirror ($animation-map)

Runs an animation once foward and then immediately after completion, runs the same animation in reverse.

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

  @include kf-mirror($animation-map);
}
.kf-mirror-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-mirror-example'>
  <div></div>
</div>
Edit