<body>
  <div id="alice-container">
    <img id="alice1" src="https://raw.githubusercontent.com/mdn/learning-area/main/javascript/asynchronous/sequencing-animations/start/alice.svg" role="img" alt="silhouette of crouching long haired character in dress and short boots">
    <img id="alice2" src="https://raw.githubusercontent.com/mdn/learning-area/main/javascript/asynchronous/sequencing-animations/start/alice.svg" role="img" alt="silhouette of crouching long haired character in dress and short boots">
    <img id="alice3" src="https://raw.githubusercontent.com/mdn/learning-area/main/javascript/asynchronous/sequencing-animations/start/alice.svg" role="img" alt="silhouette of crouching long haired character in dress and short boots">
  </div>
</body>


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");

alice1.animate(aliceTumbling, aliceTiming).finished
  .then(() => alice2.animate(aliceTumbling, aliceTiming).finished)
  .then(() => alice3.animate(aliceTumbling, aliceTiming).finished)
  .catch(error => console.error(`Error animating Alices: ${error}`));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.