How to Smoothly Animate a Conic Gradient Background in CSS?

I’m trying to create a smooth animation effect for a conic gradient background in CSS. My goal is to have the gradient appear to shift smoothly without rotating the entire element.

Here’s the CSS I’m currently using:

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);
    }
}

However, the animation doesn’t look smooth—it appears to be jerky and not continuous. I’m aiming for a seamless and fluid transition.

My questions are:

1. How can I achieve a smooth, continuous shifting animation for a conic gradient background?
2. Are there better techniques or optimizations to animate conic gradients in CSS for a more fluid result?

I initially tried animating the background property with keyframes to create a shifting effect in the conic gradient. My expectation was a smooth, seamless animation where the gradient would appear to flow continuously. However, the result was a jerky and non-fluid transition. I also experimented with using CSS variables to adjust the starting angle dynamically and tried rotating a pseudo-element, but neither approach yielded the desired smoothness. I’m looking for a method to make this animation as smooth and continuous as possible.