FireFox转换和转换不起作用 [英] FireFox transform and transition not working

问题描述

所以，这是我的CSS：

  img.buttonImg {
 -webkit-transition：all 0.5s易于进出; 
 -moz-transition：全部0.5s缓出; 
 -o-transition：全部0.5s缓出; 
 -ms-transition：全部0.5s缓出; 
转换：所有0.5s缓出; 
} 
 
 img.buttonImg：hover {
 -webkit-transform：rotate（360deg）; 
 -moz-transform：rotate（360deg）; 
 -o-transform：rotate（360deg）; 
 -ms-transform：rotate（360deg）; 
 transform：rotate（360deg）; 
} 
  

然而，没有动画似乎发生，图像根本不旋转FireFox，但在其他浏览器上。

解决方案

这是您的问题 - 由 这个例子 。

当鼠标悬停在 img 元素，因为它位于按钮元素内。我认为这是一个渲染问题，因为 似乎就是 FF 的情况。在Chrome和其他现代浏览器中，它工作的很好。

至于解决方案，将 img 元素从 button 显然可以解决这个问题。

或者，当鼠标悬停在 button ，而不是小孩 img 元素。 更新的示例 - 它在FF中可用。

  button.t：hover img {
 transform：rotate（360deg）; 
 / *其他供应商.. * / 
} 
  

然而，我甚至不知道在按钮元素中是否有 img 元素是有效的。这可能是渲染错误的原因;如果它甚至是一个错误。

So, this is my CSS:

img.buttonImg {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out; 
  -o-transition: all 0.5s ease-in-out; 
  -ms-transition: all 0.5s ease-in-out; 
  transition: all 0.5s ease-in-out; 
}

img.buttonImg:hover { 
  -webkit-transform: rotate(360deg); 
  -moz-transform: rotate(360deg); 
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg); 
  transform: rotate(360deg); 
}

Yet no animation seems to happen, the image isn't rotating at all on FireFox, but on other browsers it does.

解决方案

Here is your problem - demonstrated by this example.

The transition doesn't work when hovering over the img element because of the fact that it is within a button element. I assume this is a rendering issue, as this only seems to be the case for FF. It works fine in Chrome and other modern browsers.

As for a solution, removing the img element from the button will obviously solve the problem.

Alternatively, you could add the rotation transition effect when hovering over the button as opposed to the child img element. Updated example - it works in FF.

button.t:hover img { 
    transform: rotate(360deg);
   /* other vendors.. */
}

Both solutions work; however, I don't even know if it is valid to have an img element within a button element. This is probably the reason for the rendering bug; if it even is a bug.

这篇关于FireFox转换和转换不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！