Animate background gradient transition

Question

Hello guys!
I am having an inconvenience to perform the animation in a simple background gradient transition.
Although the mouse passes over the object, the gradient transition is successful, but the time transition is automatic, despite being set to 20sec.

Could someone give me a hand?

div {
width: 70px;
height: 50px;
background:-webkit-linear-gradient(right, red, green 30%);
transition: background 20s;
-webkit-transition: background 20s;
}

div:hover {
background:-webkit-linear-gradient(right, red, green);
}

p {
color: rgb(255,255,255,0.4);
font-family: Calibri;
display: inline-table;
position: absolute;
transform: translate(10px, 0px);

Answer 1

background not an animatable css property.
More information please check
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Answer 2

thks!