Svelte: не работает встроенная CSS-анимация

Не работает встроенная анимация 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;
}

Оно работает! Но я хочу добавить анимацию как встроенный стиль.

Зачем именно вам нужен встроенный стиль? animation — это сокращенное свойство. Если вам нужна дисперсия, например. просто скорость, вы можете определить все, кроме animation-duration в теге <style>.

H.B. 18.11.2022 15:58
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
1
62
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Все в стиле компонента по умолчанию привязано к компоненту, и встроенный стиль, по-видимому, не распознается как относящийся к определенному @keyframes.

Обычные селекторы можно сделать глобальными, используя :global() вокруг селектора, но для @keyframes вам нужно будет добавить к имени префикс -global- (который снова удаляется при компиляции).

@keyframes -global-bg { ... }

РЕПЛ

Обратите внимание, что тогда это действительно определяется как глобальное, и любой другой компонент, который определяет глобальные ключевые кадры с именем bg, будет вызывать помехи.

Другие вопросы по теме