<div id="a"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

$background: #e45349;
$light: #efefff;

body {
  background: $background;
  display: flex;
  justify-content: center;
}

div {
  width: 5vw;
  height: 5vh;
  background: $light;
  border-radius: 1vh;
}

var a = document.querySelectorAll('div');
a = Array.prototype.slice.call(a);

var timings = {
  easing: 'ease-in-out',
  iterations: Infinity,
  direction: 'alternate',
  fill: 'both'
}

a.forEach(function(el, i, ra) {
  timings.delay = i * 98;
  
  timings.duration = 2500;
  el.animate([
    {transform: 'translateY(0) scaleX(.8)'},
    {transform: 'translateY(95vh) scaleX(1)'}
  ], timings);
  
  timings.duration = 2000;
  el.animate([
    {opacity: 1},
    {opacity: 0}
  ], timings);
  
  timings.duration = 3000;
  el.animate([
    {backgroundColor: 'rgb(239, 239, 255)'},
    {backgroundColor: '#e4c349'}
  ], timings);
});