CSS3关键帧动画在Retina显示器上运行缓慢

Question

采用非常基本的CSS3动画规则，如下所示：

.dimension.fadeIn {
  -webkit-animation: fadeIn 0.7s;
  -webkit-animation-timing-function:ease-in-out;
  height:24px;
}

@-webkit-keyframes fadeIn {
  0% {
    height:0;
    opacity: 0;
  }
  30% {
    height:24px; /* the default row (tr) height */
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
}

在除了MacBook Retina显示屏之外的所有显示屏上，Chrome浏览器中的动画都非常流畅。但是当我们在MBP Retina上尝试时，动画明显变慢，感觉通常也比较卡顿。

当我使用Transit时，也遇到了同样的情况（如果你有Retina和外部显示器，请尝试运行Transit的演示（或任何CSS3动画？），并在两个屏幕之间进行比较，你应该会感觉不像你想要的那么平滑）。

我们尝试通过设置-webkit-transform：translateZ（0）以及一些其他东西，如-webkit-backface-visibility：hidden来利用GPU，但没有效果。

因此，显然Retina显示屏具有更高的像素密度，但可以采取哪些方法解决这个问题？

- subZero

---

在我看来，动画化高度总是会使页面变得缓慢。可以尝试动画化其他属性。例如，如果您正确设置-webkit-perspective，就可以轻松地通过translate: rotateY(-90deg)实现相同的效果。当您有大约1000个元素并且动画高度时，问题不仅仅出现在Retina屏幕上。 - drinchev

我没有使用任何动画高度或者其他被认为速度较慢的操作，但我观察到完全相同的行为在 Firefox 和 Chrome 上都存在。 - AlexG

尝试使用transform:scaleY进行动画处理，看看是否有所帮助。我也遇到了完全无法接受的性能问题，这些事情让我头疼不已。 - Reasurria

Answer 1

首先，我会将第一个height:0;更改为height:0px; - 这可以防止在旧浏览器上出现错误。

其次，尝试添加will-change属性。这将使某些浏览器上的动画更加流畅，我已经有过这样的经验。

此外，我发现在动画中调整高度可能会引起很多问题。我宁愿选择像这样的东西：

.dimension {
  transition: all .21s ease-in-out;
  will-change: opacity, height;
  height: 0px
}
.dimension.fadeIn {
  -webkit-animation: fadeIn 0.49s;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-animation-delay : .21s;
  height:24px;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
}

请告诉我它是否有效 :)

- Leo