How to apply smooth animation to conic-gradient() using Tailwind CSS

Question

I am building a current datetime clock which shows date hours, minutes, seconds & clock format. Currently, I have done:

Here is my code

<div class="relative h-[200px] w-[200px] rounded-full flex items-center justify-center before:content-[''] before:absolute before:h-[100px] before:w-[100px] before:bg-white before:rounded-[50%]" :style="`background: conic-gradient(#ff5841 ${currentDateTime.getSeconds() * 6}deg, #ededed 0deg);`">
    <span class="relative text-3xl font-bold text-gray-800" x-text="currentDateTime.getSeconds() < 10 ? '0' + currentDateTime.getSeconds() : currentDateTime.getSeconds()"></span>
    <span class="absolute -bottom-10">Seconds</span>
</div>

I have tried but it didn't work as I expected

tailwind.config.js

animation: {
    'conic-gradient': 'conicGradient 4.5s ease-out 0s infinite none running',
},

keyframes: {
    conicGradient: {
        "50%": { opacity:'0%' },
        "100%": { opacity:'100%' }
    }
}

I also try adding this code to plugin addUtilities() method or resource/css/app.css.

@property --conic-opacity {
    syntax: '<percentage>';
    initial-value: 100%;
    inherits: false;
}

tailwind.config.js

conicGradient: {
    "50%": { '--conic-opacity':'0%' },
    "100%": { '--conic-opacity':'100%' }
},

Nothing happen when using animate-conic-gradient class.

I want to apply smooth animation to hours, minutes, seconds and clock like this link using tailwind css. https://stackoverflow.com/a/65134302/14151733