CSS-анимация заполняет текст справа налево ⇐ CSS

[Anonymous]

В настоящее время у меня работает анимация. За исключением того, что фон сохранился. Например, если я реализую этот компонент на каком-то другом компоненте, имеющем фоновое изображение или непрозрачность, этот черный цвет будет отталкивать.

У меня вопрос: как убрать черный цвет с компонента?

Я открыт для альтернативных способов создания анимации. (Я ищу общее решение CSS. Приветствуется решение Tailwind или Vue3)

.content { дисплей: стол; белый цвет; фон: черный; режим смешивания: умножение; } .контейнер { маржа: авто; фон: линейный градиент (#FFB800, #FFB800) прозрачный без повторения 100% 0; размер фона: 100% 100%; анимация: полосы 2s линейная бесконечность; } @keyframes полосы { 0% { размер фона: 0 100%; } 50% { размер фона: 100% 100%; } 100% { размер фона: 0% 100%; } } .родитель { плыть налево; ПРОБЛЕМА