Animação contínua de rotação CSS ao passar o mouse, animada de volta a 0deg ao passar o mouse

Eu tenho um elemento que gira quando você passa o mouse indefinidamente. Quando você passa o mouse, a animação para. Simples

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to { 
        -webkit-transform: rotate(360deg);
    }
}

.elem:hover {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

Quando você passa o mouse, porém, a animação cessa abruptamente, revertendo para 0 graus. Gostaria de animar de volta para essa posição, mas estou tendo problemas para resolver a sintaxe.

Qualquer entrada seria incrível!

questionAnswers(7)

yourAnswerToTheQuestion