On hover Animation

Hi I'm working on a small animation (it activates on hover) that i want to make it so that when i hover out of my icon, i want the animation to complete till the end of it anyway, without making it look cut out like broken, does anybody know a solution for that, my code looks something like that:

.icon {
  &:hover {
       animation: shake 1s ease infinite;
     }
  }

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

 50% {
   transform: rotate(30deg);
 }

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