HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animationiteration once vs twice</title>
  <style>
    .box {
      width: 60px;
      height: 60px;
      margin: 0.4rem 0;
      display: inline-block;
    }
    #once { background: #dc2626; }
    #twice { background: #2563eb; }
    .run-once { animation: bounce 0.45s ease 1; }
    .run-twice { animation: bounce 0.45s ease 2; }
    @keyframes bounce {
      from { transform: translateY(0); }
      to { transform: translateY(-16px); }
    }
  </style>
</head>
<body>
  <div class="box" id="once"></div>
  <div class="box" id="twice"></div>
  <pre id="out">Running...</pre>
  <script>
    var out = document.getElementById("out");
    var lines = [];
    function log(msg) {
      lines.push(msg);
      out.textContent = lines.join("\n");
    }
    function wire(el, label) {
      el.addEventListener("animationiteration", function () {
        log(label + ": iteration");
      });
      el.addEventListener("animationend", function () {
        log(label + ": end");
      });
    }
    var once = document.getElementById("once");
    var twice = document.getElementById("twice");
    wire(once, "count1");
    wire(twice, "count2");
    once.classList.add("run-once");
    twice.classList.add("run-twice");
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element animationiteration — count of one (Try It)