<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Sequencing animations</title>
    <script type="text/javascript" src="main.js" defer></script>
    <link href="style.css"rel="stylesheet">
  </head>

  <body>

    <div id="alice-container">
      <img id="alice1"  src="https://cdn.glitch.global/01766c69-d0ff-4578-ab2c-0f67e78d474c/alice.svg?v=1662971445952" role="img" alt="silhouette of crouching long haired character in dress and short boots">
      <img id="alice2"  src="https://cdn.glitch.global/01766c69-d0ff-4578-ab2c-0f67e78d474c/alice.svg?v=1662971445952" role="img" alt="silhouette of crouching long haired character in dress and short boots">
      <img id="alice3"  src="https://cdn.glitch.global/01766c69-d0ff-4578-ab2c-0f67e78d474c/alice.svg?v=1662971445952" role="img" alt="silhouette of crouching long haired character in dress and short boots">
    </div>

  </body>

</html>

body {
  background: #6c373f;
  display: flex;
  justify-content: center;
  }

#alice-container {
  width: 90vh;
  display: grid;
  place-items: center;
  grid-template-areas:
    "a1 . ."
    ". a2 ."
    ". . a3";
}

#alice1 {
  grid-area: a1;
}

#alice2 {
  grid-area: a2;
}

#alice3 {
  grid-area: a3;
}
const aliceTumbling = [
  { transform: 'rotate(0) scale(1)' },
  { transform: 'rotate(360deg) scale(0)' }
];

const aliceTiming = {
  duration: 2000,
  iterations: 1,
  fill: 'forwards'
}

const alice1 = document.querySelector("#alice1");
const alice2 = document.querySelector("#alice2");
const alice3 = document.querySelector("#alice3");


// My work from here:

function sequence() {
  alice1.animate(aliceTumbling, aliceTiming).finished.then(()=>{
    alice2.animate(aliceTumbling, aliceTiming).finished.then(()=>{
      alice3.animate(aliceTumbling, aliceTiming);
    })
  })
  
} 

sequence();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.