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 应用程序的原因。使用硬件加速在移动设备上特别有用，因为它有助于减少设备上的资源消耗。