平滑的@keyframes 动画在 Safari 上变得离散答案

【问题标题】：Smooth @keyframes animation goes discrete on Safari平滑的@keyframes 动画在 Safari 上变得离散
【发布时间】：2019-10-09 00:10:59
【问题描述】：

我为一个带有加载栏的网站构建了一个预加载屏幕，该加载栏使用 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>

预计会有流畅的动画。

谢谢。

【问题讨论】：

P.S 第一个双行 CSS (@keyframes loading-wrapper-anim {) 代码是偶然添加的 :) 它不存在于实际的 CSS 文件中。

标签： html css macos safari css-animations

【解决方案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

【讨论】：

谢谢，马特。您的解决方案也帮助我走上了正轨:)

【解决方案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 动画和过渡方面效率更高。

【讨论】：