Safari CSS动画无法正常工作

Question

我有一个CSS多重动画，但有一个延迟，并且在延迟期间将其暂停。它可以在Firefox和Chrome上正常运行。但是，在Safari上，动画会跳到最后一帧。为什么以及如何解决？

toogleAnimation() {
    let el = document.querySelectorAll('.toogle-animation');
    let btn = document.querySelector('.animation-btn');
    let endAnimation = document.querySelector('.image4-block');
    endAnimation.addEventListener('animationend', function (event) {
      endAnimation.dataset.endAnimation = "true";
    });

    btn.onclick = function () {
      if(endAnimation.dataset.endAnimation === "true") {
        el.forEach(elem => {
          elem.classList.remove('animated');
          void elem.offsetWidth;
          elem.classList.add('animated');
        });
        endAnimation.dataset.endAnimation = "false";
      } else {
        el.forEach(elem => {
          elem.classList.toggle('paused');
        });
      }
    }
  }

.line-text1.animated {
  transform: matrix(1, 0, 0, 1, 0, 0) translateX(203%);
  animation: slide-in-line-text 1.5s 5s forwards;
}
.image2-block.animated {
  transform: matrix(1, 0, 0, 1, 0, 0);
  width: 119px;
  height: 80px;
  opacity: 0;
  animation: fadeIn 1s 7s forwards;
}