Firefox中的CSS动画Bug

Question

我在网站上有一个CSS动画，可以对按钮进行悬停效果。

在Chrome和IE浏览器中它很好但在Firefox中我遇到了一个丑陋的问题。

一些白色碎片在悬停后仍然存在。

动画CSS：

.Hotel:hover{
   animation-name: pulse;
   animation-duration: 1s;
 }


@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(100.10, 10.10, 10.10);
    transform: scale3d(100.10, 10.10, 10.10);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.80, 1.80, 1.80);
    transform: scale3d(1.80, 1.80, 1.80);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

Answer 1

一切看起来很好，可能是由于硬件加速设置不在

打开可用时使用硬件加速。

  

目前，浏览器包括Chrome，FireFox，Safari，IE9 +和最新版本   Opera版本全部附带硬件加速;他们只使用它   当他们有迹象表明DOM元素会从中受益时。   使用CSS，最强烈的迹象是3D转换   应用于元素。因为你已经完成了你的   然后除了硬件加速开启之外似乎没什么问题   在我的浏览器中它很好。

在Chrome和Safari中，我们可能会在使用CSS变换或动画时看到闪烁效果。以下声明可用于解决此问题：

.className{
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;

   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */
}

另一种似乎在WebKit驱动的桌面和移动浏览器中运行良好的方法是translate3d：

.className{
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

原生移动应用程序也充分利用了设备GPU - 这就是为什么它们的表现略胜于Web应用程序。使用硬件加速在移动设备上尤其有用，因为它有助于减少设备上的资源消耗。