CSS Animation on Mouse Down-CodePudding

i created a css class for animation on click a div

.part{
  &:active{
    animation: bounce 0.7s 1 linear;
  }
}


@keyframes bounce {
50% {
  transform: rotate(5deg) translate(20px, -50px);
}
to {
  transform: scale(0.9) rotate(10deg) translate(50px, -280px);
  opacity: 0;
}

}

 <a href="[{$_productLink}]"  title="Bag">
      <div >
         <i ></i>
      </div>
 </a>

when i click the div, the animations starts for 0.1 sek, only when i hold the mouse button, i can see the full animation, any idea how i can fix this? I want to see the full animation on mouse down.

CodePudding user response：

Added runnable code snippet with comments as per your requirements.

document.querySelector('.part').addEventListener('click', function() {
  this.classList.add('animate')
  
  /*
  You can skip below code. 
  As it removes animate class once animation is done.
  */
  
  setTimeout(() => {
    this.classList.remove('animate')
  }, 3000)
})

/*Added animate class so which can be added later to div to animate it when it is clicked*/
.part i {
font-size: 40px
}
.part.animate{
    animation: bounce 0.7s linear;
}


@keyframes bounce {
50% {
  transform: rotate(5deg) translate(20px, -50px);
}
to {
  transform: scale(0.9) rotate(10deg) translate(50px, -280px);
  opacity: 0;
}
}

 <a href="#!"  title="Bag">
      <div >
         <i >