Answers for "stop css animation on hover"

css start animation on hover

button{
  animation: rotate360 1.2s linear infinite;  /* animation set */
  animation-play-state: paused;               /* put paused */
}
button:hover{
  animation-play-state: running;              /* trigger on hover */
}
@keyframes rotate360 {                        /* keyframes of animation */
  to { transform: rotate(360deg); }           
}

animation not hover out

/* Add animation to normal selector as well, besides hover selector */
div {
  background-color: #333;
  transition: background-color 400ms;
} 

div:hover {
  background-color: #000;
  transition: background-color 400ms;
}