Как я могу анимировать несколько радиальных градиентов по часовой стрелке в div? ⇐ CSS

[Anonymous]

У меня есть следующие коды:
HTML

Код: Выделить всё

CSS

Код: Выделить всё

.hero {
background-image: radial-gradient(ellipse 30% 100% at -4% 5%, #ce0058, transparent),
radial-gradient(ellipse 100% 75% at 0% 0%, #cf4520, #460702, transparent),
radial-gradient(ellipse 100% 100% at 100% 100%, black, black);

display: flex;
width: 100%;
max-width: 100vw;
justify-content: center;
align-items: stretch;
text-align: justify;
flex-wrap: wrap;
margin: 0 auto;
border-bottom: 2px solid #eee;

animation-name: colors-circulating;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-iteration-count: 3;
}

Я удалил HTML-код для сокращения, но он реализован.
Приведенный выше CSS стилизует элемент div с помощью черного фона и двух радиальных градиентов кирпично-коричневый и ярко-розовый. Градиенты изначально расположены рядом с верхним левым углом div. Полную реализацию можно посмотреть здесь: Герой-баннер веб-сайта, над которым я работаю
Я хочу анимировать градиенты, чтобы они двигались по часовой стрелке сверху слева => вверху справа => внизу справа => внизу слева, поэтому я написал этот код:

Код: Выделить всё

@keyframes colors-circulating {
0%, 100% {
background: radial-gradient(
ellipse 30% 100% at -4% 5%,
#ce0058,
transparent
),
radial-gradient(
ellipse 100% 75% at 0% 0%,
#cf4520,
#460702 60%,
transparent
),
radial-gradient(ellipse 100% 100% at 100% 100%, black, black);
}

25% {
background: radial-gradient(
ellipse 30% 100% at 96% 5%,
#ce0058,
transparent
),
radial-gradient(
ellipse 100% 75% at 100% 0%,
#cf4520,
#460702 60%,
transparent
),
radial-gradient(ellipse 100% 100% at 100% 100%, black, black);
}

50% {
background-image: radial-gradient(
ellipse 30% 100% at 96% 105%,
#ce0058,
transparent
),
radial-gradient(
ellipse 100% 75% at 100% 100%,
#cf4520,
#460702 60%,
transparent
),
radial-gradient(ellipse 100% 100% at 100% 100%, black, black);
}

75% {
background-image: radial-gradient(
ellipse 30% 100% at -4% 105%,
#ce0058,
transparent
),
radial-gradient(
ellipse 100% 75% at 0% 100%,
#cf4520,
#460702 60%,
transparent
),
radial-gradient(ellipse 100% 100% at 100% 100%, black, black);
}
}

Проблема в том, что этот код показывает 4 четких изображения без плавной анимации. Как добиться плавного перемещения градиентов?
Я видел следующие решения, но, к сожалению, ни одно из них мне не помогло:

• Как применить несколько радиальных градиентов CSS к одному элементу
• Анимировать фоновое изображение div
• Как анимировать радиальный градиент с помощью CSS ?
• CSS-анимация не плавная с радиальным градиентом фон
• CSS-анимация с двумя радиальными градиентами, движущимися/вращающимися внутри обрезанной маски png

Я знаю, может быть, мой реализация не очень правильная, я действительно стараюсь изо всех сил.
Как я могу реализовать идею, которую я объяснил выше, используя CSS и/или vanilla JS?

Подробнее здесь: https://stackoverflow.com/questions/766 ... e-in-a-div