Advice caller

Community feedback

• 

  P

  Koda👹•3,830

  @kodan96Posted 5 months ago

  hi there 👋

  you can define the animation in CSS:

  @keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg)
  }
  }
  

  then use a helper class to attach the animation when it has the certain class:

  .dice.active {
    animation: rotate 1s linear forwards;
  }
  

  when .dice has the active class it gets animated

  Then you can use JS to toggle the class using click eventListener:

  dice.addEventListener('click', () => {
    dice.classList.add('active');
    setInterval(() => {
       dice.classList.remove('active');
    }, 500)
  })
  

  this will add the active class to .dice and automatically remove it after 500ms

  Hope this was helpful 🙏

  Good luck and happy coding! 🙌

  0