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视网膜上进行尝试时,动画运行速度明显变慢,并且通常感觉很迟钝.

我在使用Transit时会遇到相同的情况(如果您有视网膜和外部显示器,请尝试运行Transit的演示(或任何CSS3动画？),在两个屏幕之间进行比较,您应该感觉它不像您那样流畅喜欢)

我们尝试通过设置-webkit-transform: translateZ(0)和其他一些东西来利用GPU,-webkit-backface-visibility: hidden但无济于事.

显然Retina显示器具有更高的像素密度,但是可以采取什么方法来解决这个问题呢？

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

让我知道它是否有效:)