不能像這樣使用行內 css 影片：
<h1 class="test" style="animation: bg 2s linear infinite">Hello {name}!</h1>
<style>
.test {
background: yellow;
}
@keyframes bg {
from {
background: red;
}
to {
background: green;
}
}
</style>
https://svelte.dev/repl/e32b72cb98cb4b78a47b1bcb1ecab9e9?version=3.53.1
但是如果洗掉樣式屬性
<h1 class="test">Hello {name}!</h1>
并添加
.test
background: yellow;
animation: bg 2s linear infinite;
}
有用！但我想將影片添加為行內樣式。
uj5u.com熱心網友回復：
默認情況下，組件樣式中的所有內容都限定在組件范圍內，并且行內樣式顯然不被識別為參考已定義的@keyframes.
:global()可以使用選擇器周圍的常規選擇器將其設為全域選擇器，但@keyframes您必須在名稱前加上前綴-global-（在編譯時再次洗掉）。
@keyframes -global-bg { ... }
REPL
請注意，這實際上是定義為全域的，任何其他使用該名稱定義全域關鍵幀的組件bg都會造成干擾。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/537829.html
標籤：CSS动画苗条的苗条 3
下一篇：如何使div隨滑鼠游標平滑移動？