title: How to chain CSS animations using Promise?
body: <p>I'm trying to figure out how <code>Promise</code> works and to make one CSS animation to run after another. But they run simultaneously...</p>
  
  <p><a href="https://jsfiddle.net/04v1fx95/" rel="nofollow noreferrer">JS fiddle</a></p>
  
  <pre><code>let move_boxes = () =&gt; {
      return new Promise( (resolve, reject) =&gt; {
          resolve ('boxes moved!')
      })
  };
  let move_box_one = () =&gt; {
      return new Promise( (resolve, reject) =&gt; {
          resolve (document.getElementById('div_two').style.animation = 'move 3s forwards')
          console.log('box one moved!')   
      })
  
  }
  let move_box_two = () =&gt; {
      return new Promise( (resolve, reject) =&gt; {
          resolve (document.getElementById('div_one').style.animation = 'move 3s forwards')
          console.log('box two moved!')       
      })
  }
  
  move_boxes().then(() =&gt; {
      return move_box_one();
  }).then(() =&gt; {
      return move_box_two();
  });
  </code></pre>