Question

我正在尝试使用一些简单的CSS关键帧动画在加载时设置SVG徽标的动画。

然而，在Chrome上，最后两个元素消失而不是动画，而在Safari上，最后几个元素忽略了它们的延迟差异，并且所有元素都会同时动画出来。

仅在Firefox上，整个动画才能正常运行。

See the Codepen here（在每个浏览器中打开以查看差异）

我正在使用Autoprefixer，从输出CSS文件中我可以看到它只是创建了一些-webkit-前缀，而这就是它。所需的动画适用于其他单个元素，因此错误不存在。

以下是其中一个对角线元素（Chrome上存在问题）输出CSS的示例：

.m-logo-stroke-blue.m-logo-stroke-diag {
   -webkit-animation: fadeInDownRight 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both, fadeOutUpLeft 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53) 2.7s forwards;
   animation: fadeInDownRight 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both, fadeOutUpLeft 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53) 2.7s forwards;
}

真的很困惑为什么除了Firefox之外这种方法无法正常工作。

修改

所以我发现，如果我将动画的持续时间设置为比延迟更长的对角线，它会修复它们在Chrome上消失，但当然它会使动画变得非常慢。不知道为什么会这样。

编辑2：

好的，所以我哥哥想出了一个解决方案，虽然我真的不知道为什么会这样。

我有这个：

.m-logo-stroke-blue {
  &.m-logo-stroke-up {
    animation: fadeInShrink .2s $easeOutQuad .6s both, fadeOutUp .2s $easeInQuad 2s forwards;
  }
  &.m-logo-stroke-across {
    animation: fadeInShrink .2s $easeOutQuad .4s both, fadeOutRight .2s $easeInQuad 2.3s forwards;
  }
  &.m-logo-stroke-diag {
    animation: fadeInDownRight .2s $easeOutQuad both, fadeOutUpLeft .2s $easeInQuad 2.7s forwards;
  }
}

.m-logo-stroke-red {
  &.m-logo-stroke-up {
    animation: fadeInShrink .2s $easeOutQuad .7s both, fadeOutUp .2s $easeInQuad 2.1s forwards;
  }
  &.m-logo-stroke-diag {
    animation: fadeInDownLeft .2s $easeOutQuad .21s both, fadeOutUpRight .2s $easeInQuad 2.8s forwards;
  }
}

并将其更改为：

.m-logo-stroke-blue {
  &.m-logo-stroke-up {
    animation: fadeInShrink .2s $easeOutQuad .6s both, fadeOutUp .2s $easeInQuad 2s forwards;
  }
  &.m-logo-stroke-across {
    animation: fadeInShrink .2s $easeOutQuad .4s both, fadeOutRight .2s $easeInQuad 2.3s forwards;
  }
  &.m-logo-stroke-diag {
    animation: fadeInDownRight .2s $easeOutQuad .21s both, fadeOutUpLeft .2s $easeInQuad 2.5s forwards;
  }
}

.m-logo-stroke-red {
  &.m-logo-stroke-up {
    animation: fadeInShrink .2s $easeOutQuad .7s both, fadeOutUp .2s $easeInQuad 2.1s forwards;
  }
  &.m-logo-stroke-diag {
    animation: fadeInDownLeft .2s $easeOutQuad .41s both, fadeOutUpRight .2s $easeInQuad 2.6s forwards;
  }
}

如果您将其粘贴到CodePen中，您会发现它适用于所有浏览器。

出于某种原因，他们都需要延迟，延迟时间必须稍长？有人可以解释这里发生了什么吗？

如果没有人能尽快解释，我会发布解决方案。

编辑3：

WTF正在进行中？现在它已停止工作，我的代码没有变化。 Chrome是否会改变处理链式CSS动画的方式。

在Chrome中，最后一个动画无法运行。在Safari中，时机已关闭。在Firefox中它和以前一样完美。

我在这里完全不知所措。请停下来。

链接CSS关键帧动画在浏览器中的行为有所不同

0 个答案: