Edit in JSFiddle

<div id="rotating">hover me</div>

#rotating {
    position: absolute;
    top:50%;
    left:50%;
    background-color:#00FF00;
    -webkit-animation: move1 1s ease-in-out, move2 1s, move3 1s ease-in-out;
    animation: move1 1s ease-in-out, move2 1s ease-in-out, move3 1s ease-in-out;
    -webkit-animation-delay: 0s, 1s, 2s;
    animation-delay: 0s, 1s, 2s;
}
#rotating:hover {
    -webkit-animation: notexistent;
    animation: notexistent;
/*
workaround, um animation neu zu starten: 
eine nicht existente animation draufpacken,
automatisch wird wieder die originale geladen
-
workaround to restart an animation:
just assign a nonexistent animation and the
initial one will be loaded
*/
}
/* webkit syntax */
 @-webkit-keyframes move1 {
    0% {
        top: 50%;
        left: 50%;
        transform: rotate(0deg);
    }
    100% {
        top: 25%;
        left: 69%;
        transform: rotate(15deg);
    }
}
@-webkit-keyframes move2 {
    from {
        top: 25%;
        left: 69%;
        transform: rotate(15deg) scaleX(1);
    }
    to {
        top: 25%;
        left: 69%;
        transform: rotate(-15deg) scaleX(-1);
    }
}
@-webkit-keyframes move3 {
    0% {
        top: 25%;
        left: 69%;
        transform: rotate(-15deg) scaleX(-1);
    }
    100% {
        top: 50%;
        left: 50%;
        transform: rotate(0deg) scaleX(1);
    }
}
/* Standard syntax */
 @keyframes move1 {
    0% {
        top: 50%;
        left: 50%;
        transform: rotate(0deg);
    }
    100% {
        top: 25%;
        left: 69%;
        transform: rotate(15deg);
    }
}
@keyframes move2 {
    from {
        top: 25%;
        left: 69%;
        transform: rotate(15deg) scaleX(1);
    }
    to {
        top: 25%;
        left: 69%;
        transform: rotate(-15deg) scaleX(-1);
    }
}
@keyframes move3 {
    0% {
        top: 25%;
        left: 69%;
        transform: rotate(-15deg) scaleX(-1);
    }
    100% {
        top: 50%;
        left: 50%;
        transform: rotate(0deg) scaleX(1);
    }
}