SOURCE

<div>
</div>

div:hover {
    background-color:blueviolet;
    animation-name:div;
    animation-duration:500ms;
    animation-direction:normal;
    animation-iteration-count:infinite;
    animation-timing-function: linear;
}

@keyframes div {
    from {
        transform:rotate(0deg);
    }
    25% {
        transform:rotate(22.5deg);
    }
    50% {
        transform:rotate(45deg);
    }
    75% {
        transform:rotate(67.5deg);
    }
    to {
        transform:rotate(90deg);
    }
}

div {
    background-color:lightgray;
    width:200px;
    height:200px;
    position:relative;
    left:100px;
    top:100px;
    transition-duration:500ms;
}