Svelte内联CSS动画失效：如何通过内联方式添加动画？

你遇到的问题本质是Svelte的作用域样式机制导致的：Svelte会给组件内的CSS选择器、动画名等自动添加唯一哈希后缀（比如把@keyframes bg变成@keyframes bg-svelte-abc123），但内联style属性是直接渲染到DOM上的，不会经过Svelte的样式处理，所以你写的animation: bg ...找不到带哈希后缀的实际动画名，自然无法生效。

下面给两种可行的解决方案：

方案1：把动画声明为全局样式 #

在@keyframes前加上:global()，让它脱离组件作用域，这样Svelte就不会给它加哈希后缀，内联style里的bg就能直接匹配到：

<h1 class="test" style="animation: bg 2s linear infinite">Hello {name}!</h1>

<style>
.test { 
    background: yellow;
}

:global(@keyframes bg) {
    from {
      background: red;
    }
    to {
      background: green;
    }
}
</style>

方案2：通过CSS自定义属性传递动画名 #

利用CSS自定义属性在组件作用域内传递处理后的动画名，内联style通过var()引用即可：

<h1 class="test" style="animation: var(--bg-animation) 2s linear infinite">Hello {name}!</h1>

<style>
.test { 
    background: yellow;
    --bg-animation: bg; /* 这里的bg会被Svelte处理成带哈希的动画名 */
}

@keyframes bg {
    from {
      background: red;
    }
    to {
      background: green;
    }
}
</style>

两种方案都能实现内联style调用动画的需求，方案1适合不需要作用域隔离的全局动画，方案2则保留了Svelte样式作用域的特性，避免全局样式污染。

内容的提问来源于stack exchange，提问作者ariman