Волнообразное появление областей div

[destus]

Вариант.

<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/61811/web-animations-next-2.2.1.min.js'></script>
  <style>
    div {
      width: 40px;
      height: 40px;
      display: inline-block;
      opacity: 0;
    }
  </style>
<button>Start</button>
  <div style='background-color: red'></div>
  <div style='background-color: green'></div>
  <div style='background-color: blue'></div>
  <div style='background-color: orange'></div>
  <div style='background-color: yellow'></div>
  <script>
    const effects = {
      opacity: [0, 1]
    }
    
    const duration = 200;
    
    const getTiming = direction => ({duration, fill: 'forwards', direction})

    const normalKeyframeEffects = [];
    const reverseKeyframeEffects = [];
    
    const divs = document.querySelectorAll('div');

    for (const div of divs) {
      normalKeyframeEffects.push(new KeyframeEffect(div, effects, getTiming('normal')));
      reverseKeyframeEffects.unshift(new KeyframeEffect(div, effects, getTiming('reverse')));
    }

    const sEffects = [new SequenceEffect(normalKeyframeEffects), new SequenceEffect(reverseKeyframeEffects)];
    let nextEffect = 0;

    const play = () => {
      document.timeline.play(sEffects[nextEffect++%sEffects.length]);
      setTimeout(play, divs.length * duration);
    }

    document.querySelector('button').onclick = e => {
      e.target.remove();
      play();
    }
  </script>