CSS3: Transition hover and animation rotation bug

Question

I am trying to make an image always rotating, and on the hover a scale. First I tried with Firefox Developer Edition, works nice but once the mouse is out, the image came back to the original position and suddenly returned to the position of rotation. In chrome doesn't work, on IE it bug a lot. My goal is the image always rotate and on hover do a scale without changing the position(on firefox it goes to the first position), on "mouseout" just remove the scale, always keeping the rotation.

#homeMim img {
	position: absolute;
	height: 200px;
	-webkit-animation: spin 400s linear infinite;
	-moz-animation: spin 400s linear infinite;
	animation: spin 400s linear infinite;	
    
    -webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
}

#homeMim img:hover { 
    -webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
    transform: scale(1.5);  
}

 @-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}

<a href="#" >
  <div id="homeMim">
      <img src="http://static.tumblr.com/b83a716deb49703dec398591011d8cdd/mnd7iyt/6sPneymmi/tumblr_static_91qahxvbeggs4g0gs8wwosw08.png" /></div>
  </a>

http://jsfiddle.net/phrhm1qv/1/

Answer 1

You can only apply one transform rule at a time on a single element. If you want to rotate and scale an element, I suggest to rotate the parent element and scale the element itself.

#homeMim  {
    position: absolute;
    height: 200px;
    -webkit-animation: spin 40s linear infinite;
    -moz-animation: spin 40s linear infinite;
    animation: spin 40s linear infinite;        
}

#homeMim img { 
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

#homeMim img:hover { 
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    transform: scale(1.5); 
}

 @-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}