CSS3关键帧动画在Retina显示屏上显得迟钝

采取一个非常基本的 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显示器具有更高的像素密度,但是可以采取什么方法来解决这个问题呢？

解决方法

好吧,首先,我会改变第一个高度：0;到身高：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;
  }
}

让我知道它是否有效:)