<div class="grid">
  <div class="element element--css"> Animated using<br>CSS</div>
  <div class="element element--js">
    Animated using Animation API
  </div>
  <div class="controls">
    <button onclick="playAnimation()">Play animation</button><br><br>
    <button onclick="pauseAnimation()">Pause animation</button><br><br>
    <button onclick="slowdownAnimation()">Make animation slower</button><br><br>
    <button onclick="fastenAnimation()">Make animation faster</button><br><br>
    <button onclick="reverseAnimation()">Reverse animation</button>
  </div>
</div>

<script>
  CSS.animationWorklet.addModule('https://codepen.io/tomquinonero/pen/WNOWvMP.js');
  const keyframes = [{
      transform: 'scale(1)',
      offset: 0
    },
    {
      transform: 'scale(1.1)',
      offset: 0.25
    },
    {
      transform: 'scale(1)',
      offset: 0.50
    },
    {
      transform: 'scale(1.15)',
      offset: 0.75
    },
  ]
  const timing = {
    duration: 1200,
    easing: "linear",
    iterations: Infinity
  }
  const element = document.querySelector('.element--js')
  const animation = element.animate(keyframes, timing)
  
  
function pauseAnimation() {
  animation.pause()
}
  function playAnimation() {
  animation.play()
}
  function reverseAnimation() {
  animation.reverse()
}
  function fastenAnimation() {
  animation.playbackRate = animation.playbackRate * 1.5
}
  function slowdownAnimation() {
  animation.playbackRate = animation.playbackRate / 1.5
}
 
</script>

body {
  font-family: sans-serif;
  height: 100vh;
  display: grid;
  place-items: center;
  background: #f5b4a5;
}

.grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3.2rem;
}

.element {
  width: 8rem;
  height: 8rem;
  padding: 4rem;
  text-align: center;
  font-size: 2em;
  color: #f5b4a5;
  font-weight: bold;
  background: #5f64e2;
  border-radius: 4rem;
  transform-origin: 50% 50%;
}

.element--css{
  animation: bounce 1200ms linear infinite;
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.15);
  }
}

registerAnimator(
  "superBounce",
  class {
    constructor(options) {
      // Our code goes here
    }
    animate(currentTime, effect) {
      // Our code goes here
    }
  }
);