Html Smooth@keyframes动画在Safari上离散

我为一个网站构建了一个预加载屏幕，带有一个加载条，该加载条使用CSS@keyframes设置动画。在Chrome和Firefox上运行良好，但在macOS Safari上则变得非常分散。以下是它在Safari上的外观视频演示：

如您所见，加载条背景（灰线）和条本身（黑线）会抖动，而不是从0%宽度平滑地移动到100%。有什么问题吗？这是Safari已知的bug吗？最新的macOS和Safari

@关键帧加载包装动画{
0% {
宽度：0%；
}
100% {
宽度：100%；
}
}
.预加载器.加载包装器{
位置：绝对位置；
宽度：0%；
高度：1px；
背景：#dbdb；
顶部：12雷姆；
动画：加载包装动画1；
动画延迟：1s；
动画填充模式：正向；
align self:flex start；/*这是因为父元素*/
}
.预加载器.加载包装器.加载条{
身高：100%；
宽度：0%；
身高：100%；
背景：#000；
动画：加载包装动画3s；
动画延迟：2s；
动画填充模式：正向；
}

---

您可以尝试通过在动画上添加

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

或者，您可以研究使用

将更改
方法作为更平滑动画的最后手段。
我修复它的方法是，不尝试操纵元素的宽度（这会导致每次宽度更改时重新绘制），而是执行以下操作：

@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动画和过渡方面更有效。
p.S CSS中的第一条双线（@keyframes loading wrapper anim{）代码是意外添加的：）它不存在于实际的CSS文件中。谢谢，Matt。您的解决方案也帮助我走上了正确的道路：）