Mixins

kf-parallel ($animation-map, ...)

Runs multiple animation maps in parallel. The length of the resulting parallel animation itself is set to the longest animation. Any number of animation maps can be provided as arguments.

.kf-parallel-example {
  $a-animation: ('.a': (
    margin-left: (0ms: 0px, 2s: 100%),
    background: (0ms: white, 4s: red)
  ));
  $b-animation: ('.b': (
    margin-left: (0ms: 100%, 2s: 0%),
    background: (0ms: orange, 5s: blue)
  ));

  @include kf-parallel(
    $a-animation,
    $b-animation
  );
}

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

<div class='kf-parallel-example'>
  <div class='a'></div>
  <div class='b'></div>
</div>

Edit

kf-mirror

kf-reverse