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

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 后面的百分比，因为 V 形的尺寸以rems 为单位。

如果您能顺利实施此操作，请在评论中告诉我。

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

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

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