CSS3 : Transition hover and animation rotation bug

Question

我试图使图像始终旋转，并在悬停时显示比例。首先，我尝试使用 Firefox Developer Edition，效果很好，但是一旦鼠标松开，图像就会回到原来的位置，然后突然回到旋转的位置。在 chrome 中不起作用，在 IE 上它有很多错误。我的目标是图像始终旋转，悬停时不改变位置进行缩放(在 Firefox 上它转到第一个位置)，在“鼠标移出”时只需移除缩放，始终保持旋转。

#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

您一次只能对单个元素应用一个转换规则。如果要旋转和缩放元素，我建议旋转父元素并缩放元素本身。

#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);
    }
}