Как сделать плавный переход между background linear с пропсами?

Question

[alaskafx]

У меня есть компонент:

<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>

Суть в том, что этому компоненту в качества background передаются цвета, а он изменяет цвета блоков на те, что в пропсах.
Опять же, у меня проблема: как я могу сделать этот переход между сменой background плавной, если я передаю такие цвета:

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%)

(каждый цвет передаётся по порядку через n количества времени.)

Как я могу сделать этот переход между цветами плавным?

Answer 1

[Aetae]

Заюзать ::before и ::after с минусовым z-index. Им ставить по очереди background и анимировать opacity для наложения.