HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animation lifecycle</title>
  <style>
    .container { height: 3rem; overflow: hidden; }
    p.animation.active {
      animation-duration: 2s;
      animation-name: slide-in;
      animation-iteration-count: 2;
    }
    @keyframes slide-in {
      from { transform: translateX(100%) scaleX(3); }
      to { transform: translateX(0) scaleX(1); }
    }
    #log {
      margin-top: 0.5rem;
      border: 1px solid #999;
      padding: 0.4rem;
      min-height: 2rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <p class="animation" id="el">You chose a cold night to visit our planet.</p>
  </div>
  <button id="toggle" type="button">Activate animation</button>
  <div id="log"></div>
  <script>
    var el = document.getElementById("el");
    var log = document.getElementById("log");
    var btn = document.getElementById("toggle");
    var iterations = 0;

    function append(msg) {
      log.textContent += msg + " ";
    }

    el.addEventListener("animationstart", function () { append("start"); });
    el.addEventListener("animationiteration", function () {
      iterations += 1;
      append("iteration:" + iterations);
    });
    el.addEventListener("animationend", function () {
      append("end");
      el.classList.remove("active");
      btn.textContent = "Activate animation";
    });
    el.addEventListener("animationcancel", function () { append("canceled"); });

    btn.addEventListener("click", function () {
      el.classList.toggle("active");
      log.textContent = "";
      iterations = 0;
      var on = el.classList.contains("active");
      btn.textContent = on ? "Cancel animation" : "Activate animation";
    });

    // Auto-demo: start, then cancel
    btn.click();
    setTimeout(function () {
      if (el.classList.contains("active")) btn.click();
    }, 400);
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element animationcancel — full lifecycle (Try It)