Question

我为网站构建了一个预加载屏幕，其中包含一个加载栏，该加载栏使用CSS @keyframes进行了动画处理。在Chrome和Firefox上运行良好，但在macOS Safari上，它变得非常离散。以下是有关在Safari上的外观的视频演示：https://www.youtube.com/watch?v=ODV5lN2xZSI&feature=youtu.be

如您所见，加载条形背景（灰色线）和条形本身（黑色线）会抽动，而不是从0％宽度平滑过渡到100％。可能是一个问题，这是Safari的已知错误吗？最新的macOS和Safari。

@keyframes loading-wrapper-anim {
  0% {
    width:0%;
  }

  100% {
    width:100%;
  }
}


.preloader .loading_wrapper {
  position:absolute;
  width:0%;
  height:1px;
  background:#dbdbdb;
  top:12rem;
  animation: loading-wrapper-anim 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  align-self:flex-start; /*this one is because of the parent element*/
}


.preloader .loading_wrapper .loading_bar {
  height:100%;
  width:0%;
  height:100%;
  background:#000;
  animation: loading-wrapper-anim 3s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

<div class="preloader">
<div class="loading_wrapper">
    <div class="loading_bar">
    </div>
</div>
</div>

希望动画流畅。

谢谢。

Answer 1

您可以尝试通过在动画上添加translateZ来强制硬件加速。

.preloader .loading_wrapper {
  position:absolute;
  width:0%;
  height:1px;
  background:#dbdbdb;
  top:12rem;
  animation: loading-wrapper-anim 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  align-self:flex-start; 
  /* Add this */
  -webkit-transform: translateZ(0);
}

JSFiddle

或者，您可以考虑使用will-change方法作为平滑动画的最后手段。 https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

Answer 2

我解决问题的方法不是尝试操纵元素的宽度（每次改变宽度都会重新绘制），而是执行以下操作：

@keyframes loading-wrapper-anim {
  0% {
    transform:scaleX(0);
  }

  100% {
    transform:scaleX(1);
  }
}


.preloader .loading_wrapper {
  position:absolute;
  width:100%;
  height:1px;
  background:#dbdbdb;
  top:12rem;
  animation: loading-wrapper-anim 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  align-self:flex-start; /*this one is because of the parent element*/
  transform:scaleX(0);
  transform-origin:0% 0%;
}


.preloader .loading_wrapper .loading_bar {
  height:100%;
  width:100%;
  height:100%;
  background:#000;
  animation: loading-wrapper-anim 3s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  transform:scaleX(0);
  transform-origin:0% 0%;
}

我将transform:scaleX()与transform-origin:0% 0%（将转换中心设置到左上角）结合使用来模拟宽度变化，而没有实际改变宽度。

结论：在可能的地方使用transform。在CSS动画和过渡方面，它们的效率更高。

平滑的@keyframes动画在Safari上不连续

2 个答案: