CSS3：过渡悬停和动画旋转错误

Question

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

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

CSS3：过渡悬停和动画旋转错误

CSS3: Transition hover and animation rotation bug

css

animation

rotation

scale

hover