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

在每台显示器的Chrome中，除了MacBook Retina显示屏外，动画都像丝绸一样流畅。当我们在MBP视网膜上进行尝试时，动画运行速度明显变慢，并且通常感觉很迟钝。

我在使用Transit时会遇到相同的情况（如果您有视网膜和外部显示器，请尝试运行Transit的演示（或任何CSS3动画？），在两个屏幕之间进行比较，您应该感觉它是不像你想的那么顺利）

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

显然，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;
  }
}

让我知道它是否有效：）

Retina显示屏上的CSS3关键帧动画缓慢

1 个答案: