Applying CSS transitions (or animations) to inline styles

Question

I have created a progress bar in my React application that, as you complete tasks, the conic-gradient of the bar increases and decreases relative to the total number of tasks completed.

In order to do this, I have applied the styles inline on the div element so that when the value increases or decreases, you see the change immediately in the browser. Like so:

<div className="bar conic">
    {
      percentage <= 25 ?
        <div className="bg" style={{backgroundImage: `conic-gradient(red 0%, red ${percentage}%, rgb(0, 0, 0, 0.3) ${percentage}%, rgb(0, 0, 0, 0.3) 100%)`}}></div>
      : percentage > 25 & percentage <= 50 ?
          <div className="bg" style={{backgroundImage: `conic-gradient(orange 0%, orange ${percentage}%, rgb(0, 0, 0, 0.3) ${percentage}%, rgb(0, 0, 0, 0.3) 100%)`}}></div>
      : percentage > 50 & percentage <= 75 ?
          <div className="bg" style={{backgroundImage: `conic-gradient(yellow 0%, yellow ${percentage}%, rgb(0, 0, 0, 0.3) ${percentage}%, rgb(0, 0, 0, 0.3) 100%)`}}></div>
      : percentage > 75 & percentage <= 100 &&
          <div className="bg" style={{backgroundImage: `conic-gradient(green 0%, green ${percentage}%, rgb(0, 0, 0, 0.3) ${percentage}%, rgb(0, 0, 0, 0.3) 100%)`}}></div>
    }
    <div className="fg">
      <p className="value">{percentage}%</p>
    </div>
  </div>

I have tried applying a transition to the div in my CSS, like so:

.bg {

      transition: all 1s linear;

    }

and inline, like so:

<div className="bg" style={{backgroundImage: `conic-gradient(red 0%, red ${percentage}%, rgb(0, 0, 0, 0.3) ${percentage}%, rgb(0, 0, 0, 0.3) 100%)`, transition: 'all 1s forwards linear'}}></div>

... to no avail.

Is there a way to apply a transition or animation to the div so that, when the value changes, the bar will increase or decrease smoothly rather than jumping from its previous value to a new value?