Transition linear gradient (on hover)-CodePudding

I need to animate a the background of an element from a solid color to a linear gradient.

I've read a stack overflow question saying it's not possible, and I've tried it and it wasn't animating, it was simply switching the color without tweening.

Is there some library or something that could get this done in React?

This is from my Figma design file for the project (and Figma can animate it):

I would imagine the CSS to look something like this, but that didn't work:

.element {
    background: #00F27E;
    transition: all 400ms ease-in;
}

.element:hover {
    background: linear-gradient(265.27deg, #00FFE0 20.55%, #00F27E 94.17%);
}

Thank you in advance.

CodePudding user response：

for this particular case you can do it like below. You make one of the gradient color transparent and you animate the background-color behind

.element {
  width: 300px;
  height: 100px;
  border-radius: 20px;
  background: linear-gradient(265.27deg, #0000 20.55%, #00F27E 94.17%);  
  background-color: #00F27E;
  transition: all 400ms ease-in;
}

.element:hover {
  background-color: #00FFE0;
}

<div ></div>