Safari在选项卡未打开时暂停CSS动画延迟计时器吗？

Question

我最近遇到了一个问题，即CSS动画仅在Safari中运行时才会解除同步，但并非总是如此。

经过一段时间的测试，我找到了重现此问题的步骤。带有说明的测试用例在此Codepen中：

https://codepen.io/Richifg/pen/vYYVPQw

<!-- example html -->
<span class="animation">
    <span>AAAAAAAAA</span>
    <span>BBBB</span>
    <span>CCCCCCC</span>
    <span>DDDDDDD</span>
    <span>EEEEE</span>
</span>

// example scss
.animation {
  display: inline-block;
  width: 100%;
  text-align: center;
    font-size: 3em;
  span {
    position: absolute;
    left: 0;
    right: 0;
    animation-name: fadeOutIn;
    animation-duration: 6s;
    animation-iteration-count: infinite;
  }
}

.animation span {
    animation-duration: 10s;
    animation-iteration-count: infinite;
    opacity: 0;
    &:first-child {
        opacity: 1;
    }
    &:nth-child(2) {
        animation-delay: 2s;
    }
    &:nth-child(3) {
        animation-delay: 4s;
    }
    &:nth-child(4) {
        animation-delay: 6s;
    }
    &:nth-child(5) {
        animation-delay: 8s;
    }
}

@keyframes fadeOutIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  5% {
    opacity: 1;
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  25% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

[我相信，当标签不清晰时，Safari会暂停CSS动画延迟，并且当使用交错动画模式（其中几个元素具有相同动画但延迟有所不同时，焦点模糊暂停会导致动画完全不同步。） >

这是预期的行为吗？到目前为止，我仅在Safari中遇到过此问题。有解决方法吗？

我最近遇到了一个问题，即CSS动画仅在Safari中运行时才会解除同步，但并非总是如此。经过一段时间的测试，我找到了重现此问题的步骤。 ...

Answer 1