start animation from current position on hover ,current position animated by another animation

See more:

HTML

jQuery

CSS3

i have two classes of animation. one is for infinite rotation "rotator" another one for bounce

.subcontlooper{
-webkit-animation:rotator 120s infinite;
}
.subcontlooper:hover {
-webkit-animation:bounceIn 2s linear;
}
@-webkit-keyframes rotator{
  from{-webkit-transform:rotate(360deg);}
   to{-webkit-transform:rotate(0deg);}
}
@-webkit-keyframes bounceIn { 
    0% { 
        opacity: 0; 
        -webkit-transform: scale(.9); 
    } 

    50% { 
        opacity: 1; 
        -webkit-transform: scale(1.05); 
    } 

    70% { 
        -webkit-transform: scale(.9); 
    } 

    100% { 
         -webkit-transform: scale(1); 
    } 
} 

it works on hover and normal case

But my problem is, **on hover** second animation not starting from first animated position
also vice versa
How could i do this? i also used

-webkit-animation-fill-mode: forwards;

but no use