Как плавно анимировать фон с коническим градиентом в CSS? [дубликат] ⇐ CSS

[Anonymous]

Я пытаюсь создать эффект плавной анимации для фона с коническим градиентом в CSS. Моя цель — добиться плавного смещения градиента без вращения всего элемента.
Вот CSS, который я сейчас использую:

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

body {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
overflow: hidden;
margin: 0;
position: relative;
background: conic-gradient(from 0deg, #d5d06a, #be6d11);
animation: animateGradient 10s linear infinite;
}

@keyframes animateGradient {
0% {
background: conic-gradient(from 0deg, #d5d06a, #be6d11);
}
25% {
background: conic-gradient(from 90deg, #d5d06a, #be6d11);
}
50% {
background: conic-gradient(from 180deg, #d5d06a, #be6d11);
}
75% {
background: conic-gradient(from 270deg, #d5d06a, #be6d11);
}
100% {
background: conic-gradient(from 360deg, #d5d06a, #be6d11);
}
}

Однако анимация не выглядит плавной — она кажется прерывистой и непостоянной. Я стремлюсь к плавному и плавному переходу.
Мои вопросы:

[*]Как мне добиться плавного перехода , анимация непрерывного смещения для фона конического градиента?
[*]Существуют ли более эффективные методы или оптимизации для анимации конических градиентов в CSS для более плавного результата?

Сначала я попробовал анимировать свойство фона с помощью ключевых кадров, чтобы создать эффект смещения конического градиента. Я ожидал плавной, бесшовной анимации, в которой градиент будет казаться непрерывным. Однако результатом стал резкий и неплавный переход. Я также экспериментировал с использованием переменных CSS для динамической регулировки начального угла и пробовал вращать псевдоэлемент, но ни один из подходов не дал желаемой плавности. Я ищу способ сделать эту анимацию максимально плавной и непрерывной.

Подробнее здесь: https://stackoverflow.com/questions/786 ... und-in-css