How to make a smooth transition between background linear with props?

Question

Vue.js

I have a component:

<div id="circle__root"  
            :style="{
            width: `${size + step * 2}px`,
            height: `${size + step * 2}px`
            }"
            :class='{pulseAnimation: pulse}'
  >
    <div
      class="circle small bm"
      :style="{ width: `${size}px`, height: `${size}px`, background: color}"
    >
      <div
        class="circle middle bm"
        :class='{reverse: reverseAnim}'
        :style="{
          width: `${size + step}px`,
          height: `${size + step}px`,
          background: color,
        }"
      >
        <div
          class="circle big"
          :class='{reverse: reverseAnim}'
          :style="{
            width: `${size + step * 2}px`,
            height: `${size + step * 2}px`,
            background: color,
          }"
        ></div>
      </div>
    </div>
  </div>

The bottom line is that colors are passed to this component as background, and it changes the colors of the blocks to those in the props.
Again, I have a problem: how can I make this transition between background changes smooth if I pass colors like this:

linear-gradient(181.42deg, rgba(50, 207, 245, 0.17) 1.21%, #4DDCFF 61.62%)

linear-gradient(181.42deg, rgba(50, 245, 210, 0.17) 1.21%, #4DFFD4 61.62%)

linear-gradient(181.42deg, rgba(194, 245, 50, 0.17) 1.21%, #C2F532 61.62%)

(each color is passed in order after n times.)

How can I make this transition between colors smooth?

Answer 1

Use ::before and ::after with minus z-index. They put in turn the background and animate the opacity for the overlay.