CSS3 关键帧动画在 Retina 显示屏上反应迟缓

Posted 2023-03-06

【中文标题】CSS3 关键帧动画在 Retina 显示屏上反应迟缓

【英文标题】：CSS3 keyframe animations sluggish on Retina display

【发布时间】：2013-10-25 14:25:51

【问题描述】：

采用一个非常基本的 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 视网膜上尝试它时，动画运行明显变慢并且通常感觉滞后。

我在使用Transit 时遇到了同样的情况（如果您有视网膜和外接显示器，请尝试运行 Transit 的演示（或任何 CSS3 动画？），比较两个屏幕，您应该觉得它不像顺滑顺滑）

我们尝试通过设置-webkit-transform: translateZ(0) 以及其他一些东西（如-webkit-backface-visibility: hidden）来利用GPU，但无济于事。

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

【问题讨论】：

恕我直言，动画高度总是让人呆滞。尝试为其他属性设置动画。例如，如果您正确定位-webkit-perspective，您可以轻松实现与translate: rotateY(-90deg) 相同的效果。不仅仅是视网膜，当你有大约 1000 个元素和动画高度时，它是错误的。

我不对高度或任何被认为较慢的东西设置动画，但我观察到相同的行为；在 Firefox 和 chrome 上。

尝试为 transform:scaleY 设置动画，看看是否有帮助。我也为这类事情的表现完全不可接受而头疼。

【参考方案1】：

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

第二次尝试添加will-change-property。我体验过，这将简化某些浏览器上的动画。

此外，我发现在动画中弄乱高度会产生很多问题。我宁愿选择类似的东西：

.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;
  

让我知道它是否有效:)