Бесконечная анимация css?

Question

[deadshumz]

Есть элемент который постоянно вращается:

.square {
    transition: all 0.5s ease;
    animation: rotate 4s linear infinite;
}
@keyframes rotate {
    from {
        transform: rotate(-360deg);

Как сделать так, чтобы при наведении на элемент курсором, анимация останавливалась и объект возвращался в исходное состояние (Крутился по часовой или против часовой до исходной позиции)?