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.