Keyfram is a modular SCSS animation library which makes composing CSS keyframe-based animations simple.

Keyfram lets you define animations in a simple SCSS map format and then modify and compose your animations together using a collection of self-explanatory mixins. Keyfram takes care of the laborious work of translating your animation into CSS keyframes, freeing you up to focus on your animation itself.

You can use Keyfram for creating anything from simple button hovers to intricately timed and sequenced animations spanning over multiple elements (once only thought feasible by using javascript). Install via NPM or get the single-file import to get started.

.slide-cross-blink {
  $slide-to-center: (
    '.a': (margin-left: (0ms: 0%,   1250ms: 50%)),
    '.b': (margin-left: (0ms: 100%, 1250ms: 50%)),
  );
  $blink-div: (
    '.b': (
      background: (0ms: white, 100ms: black, 200ms: white)
    )
  );

  @include kf-chain(
    $slide-to-center,
    kf-loop(4, $blink-div),
    kf-reverse($slide-to-center)
  );
}

.slide-cross-blink {
  $size: 20px;
  position: relative;
  width: 100%;
  max-width: 500px;
  height: $size * 2;
  div {
    position: absolute;
    width: $size;
    height: $size;
    border: 1px solid black;
  }
}

<div class='slide-cross-blink'>
  <div class='a'></div>
  <div class='b'></div>
</div>

Edit