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

Question

除了不透明度之外，我还使用 CSS 变换(缩放和平移)制作了三个箭头放大和向下移动的动画。它在 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翻译中的值。或者至少它看起来更小。我试过 em相反，它看起来不错。如果您想要成比例的东西，请使用遵循 rem 的百分比s 因为 V 形的尺寸在 rem 中s。

如果您有幸实现此功能，请在评论中告诉我。

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

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

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