为什么@keyframes动画在链接内的 Safari 中不起作用

问：

块内有一个链接，该链接有一个用@keyframes动画制作的 svg。 我不知道为什么，但在 Safari 中，带有 @keyframes 的动画不起作用。 在 Chrome 和其他浏览器中，它可以正常工作。

可能是什么问题？

下面是示例 html 和 css 结构：

<div class="logo-header__new">
  <a href="/">
    <svg width="231" height="40" viewBox="0 0 231 40" fill="none" xmlns="http://www.w3.org/2000/svg">
     <!--There is a lot of path inside with 'logo-header__letter-color' class-->
    </svg>
  </a>
</div>

.logo-header__letter-color {
    animation: logo-animation-toscroll 3s infinite;
}

@keyframes logo-animation-toscroll {
    0% {
        fill: #398bea;
    }
    50% {
        fill: #fdc046;
    }
    100% {
        fill: #398bea;
    }
}