Restarting a CSS Animation

programming
8

Yes, actually! I think. Can you try this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restart Animation</title>
<style>
    body {
      display: grid;
      place-items: center;
    }

    .circle {
      width: 100px;
      height: 100px;
      background-color: #D72638;
      border-radius: 50%;

      animation-name: scaleUp;
      animation-iteration-count: 1;
      animation-duration: 1s;
      animation-fill-mode: both;
      animation-timing-function: cubic-bezier(.17, .67, .32, 1.55)
    }

    @keyframes scaleUp {
      0% {
        transform: scale(3, 3);
      }

      50% {
        transform: scale(-.5, -.5);
      }

      100% {
        transform: scale(3, 3);
      }
    }

    .container {
      width: 500px;
      height: 500px;
      box-shadow: 0px 10px 20px #666;
      overflow: hidden;
      display: grid;
      place-items: center;
      background-color: #FFFD98;
      border-radius: 10px;
      align-items: end;
    }

    #restartButton {
      margin-bottom: 40px;
      padding: 5px;
      font-weight: bold;
      border: none;
      outline: 2px solid #0880ff;
      border-radius: 5px;
      background-color: #FFF;
    }

    #restartButton:hover {
      outline-width: 5px;
      background-color: #EAF4FF;
    }
  </style>
</head>
<body>
<div class="container">
<div class="circle"></div>
<button id="restartButton">Restart</button>
</div>
<script>
    let restartButton = document.querySelector("#restartButton");
    restartButton.addEventListener("click", restartAnimation, false);

    function restartAnimation() {
      let circle = document.querySelector(".circle");

      circle.style.animationName = "none";

      requestAnimationFrame(() => {
        setTimeout(() => {
          circle.style.animationName = ""
        }, 0);
      });
    }
  </script>
</body>
</html>

This adds a setTimeout to the requestAnimationFrame call. A live version of it is here: Restart Animation

Let me know if this works @mistafisha! I’ll update the code and add a note to the video about this.

Cheers,
Kirupa