I am making a webpage and wanted the title to do a ‘swing’ animation when the mouse hovers over it. The code works fine, but when the mouse stops hovering, it snaps back to its original position, instead of finishing the animation.

@keyframes swing {
  0% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

#title {
  position: absolute;
  z-index: 1;
  top: 40px;
  left: 715px;
}

#title:hover {
  animation: swing 1s infinite;
}

I also tried adding transition: ease-in-out; to the #title element but that didn’t work either.