Svelte组件中CSS渐变动画无法正常工作的问题求助

大家好，我目前在开发一个Svelte组件，想要做一个带渐变动画的高亮CTA按钮——希望它能结合线性渐变和锥形渐变，并且随着时间自动动起来，但现在渐变动画完全没按预期生效，想请各位大佬帮忙看看问题出在哪。

我参考了一个Codepen的示例实现来写这个按钮，以下是我的Svelte组件代码（部分CSS因篇幅过长做了省略）：

<script>
    // 这里可以添加需要的Svelte脚本（目前暂未添加内容）
</script>

<style>
    @import url("https://use.typekit.net/tzv3rms.css");

    :root {
        --shiny-cta-bg: #000000;
        --shiny-cta-bg-subtle: #1a1818;
        --shiny-cta-fg: #ffffff;
        --shiny-cta-highlight: #3772ff;
        --shiny-cta-highlight-subtle: #1a243e;
    }

    @property --gradient-angle {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
    }

    /* 剩余CSS动画相关代码（因篇幅省略） */
</style>

<button class="shiny-cta">
    立即行动
</button>

我已经尝试用@property定义了可动画的自定义属性--gradient-angle，也写了对应的@keyframes规则来让这个角度随时间变化，但按钮的渐变完全没有动起来。我有点懵，不知道是Svelte对这种CSS自定义属性动画的支持有什么特殊限制，还是我自己在代码里漏了什么关键步骤？

有没有朋友遇到过类似的问题，或者能帮我排查下问题根源呀？非常感谢！

备注：内容来源于stack exchange，提问作者DanielSorby