Не работает встроенная анимация 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;
}
Оно работает! Но я хочу добавить анимацию как встроенный стиль.
Все в стиле компонента по умолчанию привязано к компоненту, и встроенный стиль, по-видимому, не распознается как относящийся к определенному @keyframes
.
Обычные селекторы можно сделать глобальными, используя :global()
вокруг селектора, но для @keyframes
вам нужно будет добавить к имени префикс -global-
(который снова удаляется при компиляции).
@keyframes -global-bg { ... }
Обратите внимание, что тогда это действительно определяется как глобальное, и любой другой компонент, который определяет глобальные ключевые кадры с именем bg
, будет вызывать помехи.
Зачем именно вам нужен встроенный стиль?
animation
— это сокращенное свойство. Если вам нужна дисперсия, например. просто скорость, вы можете определить все, кромеanimation-duration
в теге<style>
.