Changing Gradient Background with Transition

Question

I have a gradient background.

I change the background according to a condition.

I want to change the background color with transition.

If I use gradient, transition works, otherwise it doesn't work.

This transition doesn't work:

style={{
  background:
    activeLineId === lineIds[0] ? 'linear-gradient(to right, #F29E4C, Linen)' :
      activeLineId === lineIds[1] ? 'linear-gradient(to right, #2DAFD6, Linen)' :
        'linear-gradient(to right, #AFFC41, Linen)',
        transition: "all 0.8s ease",
        WebkitTransition: "all 0.8s ease",
        MozTransition:"all 0.8s ease"   
}}>

This transition works:

style={{
  background:
    activeLineId === lineIds[0] ? 'red' :
      activeLineId === lineIds[1] ? 'blue' :
        'black',
        transition: "all 0.8s ease",
        WebkitTransition: "all 0.8s ease",
        MozTransition:"all 0.8s ease"   
}}>

How can I change the gradient background with transition?