Safari 上涉及不透明度、缩放和 translateY 问题的 CSS 动画

Question

我有一个放大和向下移动的三个箭头的动画，除了不透明度外，还使用 ​​CSS 变换（缩放和 translateY）。它在 Chrome、Firefox 中运行良好。但 Safari 只显示一个淡入淡出的小箭头。请访问 jsfiddle 获取使用 SCSS 的演示。

https://jsfiddle.net/hyanqerL/

以下是我现在在我的项目中使用的，在使用了 Mig 的建议之后（我没有在 js fiddle 中包含所有的 mixin。它们用于前缀）。它有所改进，但在 Safari 上仍然存在问题。

$base: 9.6px;

.scroll-animation {
  position: absolute;
  width: 100%;
  height: rem(41);
  bottom: rem(24);
  @include flexbox;
  @include justify-content(center);

  &:focus {
    outline: none;
  }

  .chevron {
    position: absolute;
    width: $base * 3.35;
    height: $base * .3;
    opacity: 0;
    @include transform(scale(.3));
    @include animation-name(move-chevron);
    @include animation-duration(3.15s);
    @include animation-timing-function(linear);
    @include animation-iteration-count(infinite);
  }

  .chevron:first-child {
    @include animation-delay(0.28s);
  }

  .chevron:nth-child(2) {
    @include animation-delay(0.66s);
  }

  .chevron:before, .chevron:after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background: white;
  }

  .chevron:before {
    left: 0;
    @include transform(skewY(30deg));
  }

  .chevron:after {
    right: 0;
    width: 50%;
    @include transform(skewY(-30deg));
  }

  @keyframes move-chevron {
    0% {
      opacity: 0;
      @include transform(translateY(0) scale(.3));
    }

    33.3% {
      opacity: 1;
      @include transform(translateY($base * 2.8) scale(1));
    }

    53.2% {
      opacity: .2;
      @include transform(translateY($base * 4.65) scale(0.3));
    }

    60.7% {
      opacity: 0;
      @include transform(translateY($base * 5.15) scale(0));
    }

    100% {
      opacity: 0;
      @include transform(translateY($base * 5.15) scale(0));
    }
  }
}

Answer 1

需要注意的一点是，浏览器可能会很敏感，因为要制作动画，您需要相似的值。在您的情况下，如果您为不透明度和缩放设置动画，最好确保在变换中始终拥有这两个函数，以便可以进行过渡（包括不在关键帧中的默认变换）。使用中性值来填补空白（例如translateY(0em) scale(0.3)）。

Chrome 似乎足够聪明，可以再次猜测，但我在 Safari 中尝试过，现在我可以看到缩放。尽管仍有一些奇怪的地方：Safari 似乎不喜欢翻译中的rem 值。或者至少它看起来更小了。我尝试了ems，它看起来不错。如果你想要成比例的东西，请使用将遵循rems 的百分比，因为 chevron 的尺寸在 rems 中。

如果你有任何运气来实现这一点，请在 cmets 中告诉我。

除此之外，如前所述，请确保您拥有尽可能多的前缀（包括关键帧块的每个前缀版本）。您正在使用 Sass，所以应该很容易。

还要确保您修复了 jsFiddle 给出的警告，并在侧面带有一个黄点。你永远不知道哪个浏览器会很挑剔，所以你最好在浮点数和before 和after 的双冒号版本上使用前导0。

我确信您的工作版本中包含大部分内容，因为您的 jsFiddle 只是在这里帮助我们跟踪问题，但对于阅读答案的初学者来说也值得一提。