涉及opacity、scale和translateY的CSS动画在Safari上出现问题

Question

涉及opacity、scale和translateY的CSS动画在Safari上出现问题

5

我有一个三个箭头的动画，使用CSS变换（scale和translateY），以及透明度向下放大和移动。在Chrome、Firefox中运行正常，但Safari只显示一个小箭头淡入淡出。请访问jsfiddle查看演示，它使用SCSS。

以下是我目前在项目中使用的内容，经过了Mig的建议后进行了改进（我没有在js fiddle中包括所有的mixins。它们用于前缀）。它有所改善，但在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));
    }
  }
}

- Jordan Carter

不确定这是仅在您的代码片段中还是在实际代码中，但您忘记在默认的.chevron块的transform中添加translateY。这很重要，否则transform值的整个一致性将被破坏，无法正常工作。至少对我来说是这样的。 - Mig

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mig · Accepted Answer

需要注意的一点是，浏览器在动画时需要相似的数值，否则可能会出现问题。如果您同时使用不透明度和缩放进行动画，最好确保始终在transform中包含这两个函数，以便可以进行过渡（包括默认的transform不在关键帧中的情况）。使用中性值填充空白（例如translateY(0em) scale(0.3)）。

Chrome似乎足够聪明，但我在Safari中尝试了一下，现在可以看到缩放了。虽然仍然有些奇怪：Safari似乎不喜欢translate中的rem值。或者至少它看起来要小得多。我尝试了em，看起来很好。如果您想要比例，使用百分比，因为chevron的尺寸是以rem为单位的。

如果您在实现此操作时遇到任何困难，请在评论中告诉我。

除此之外，如前所述，请确保具有所需的所有前缀（包括keyframes块的每个前缀版本）。由于您正在使用Sass，因此应该很容易。

还要确保修复jsFiddle给出的警告，其在侧边栏上有一个黄色点。您永远不知道哪个浏览器会挑剔，因此最好在浮点数字上具有前导0和before和after的双冒号版本。

我相信您的工作版本中大部分都已经实现了这个问题，因为您的jsFiddle仅在帮助我们跟踪问题，但对于阅读答案的初学者来说，这也很值得一提。