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

Posted 2023-03-06

【中文标题】Safari 上涉及不透明度、缩放和 translateY 问题的 CSS 动画

【英文标题】：CSS Animation involving opacity, scale and translateY issue on Safari

【发布时间】：2019-12-04 05:22:48

【问题描述】：

我有一个放大和向下移动的三个箭头的动画，除了不透明度外，还使用 ​​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));
    
  

【问题讨论】：

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

【参考方案1】：

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

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

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

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

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

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

【讨论】：

我的代码中有前缀 mixins，但在我的 js fiddle 中取出了它们，所以我不必再次定义它们。我将您的代码粘贴到 JS 小提琴中，但它有同样的问题。此外，它在不需要前缀的最新版本的 Safari 中不起作用。 jsfiddle.net/78nqehuL

我并不是说你的情况，但一般来说，不要假设最新版本的浏览器不需要前缀。

它确实改善了一点。有趣的是，如果我禁用 JetPack 的延迟加载功能（WordPress 插件），动画看起来会有所不同，但两个版本看起来仍然不完美。我认为 Safari 无法处理页面中发生的所有事情（在其后面播放的视频之上的动画）......

好吧，还是很高兴听到。我看不到视频的结果，但是 Safari 并不是最流畅的。我很惊讶它不能与rem 值一起正常工作。一切都靠得更近了。我不明白在一个浏览器中度量如何不同。 Safari 的某个地方一定有错误。

是的，我发现 Safari 通常是最有问题的浏览器...如果几天后没有其他人回复其他答案，我很快就会给你赏金。您的回答并没有真正完全“解决”它，但此时可能没有太多其他可以做的......