Hey there, I'm working on a div element that has a linear-gradient().
When hovering over the div, it should take 2 seconds to expand to a width of 200px and add blue and green to the linear-gradient().
However, currently, the blue and green are being added immediately while the expansion takes 2 seconds.
Does anyone have a solution for this?
Below is my code:
div {
background-image: linear-gradient( to right, red, yellow);
background-color: red;
width: 100px;
border: 2px solid black;
border-radius: 5px;
transition: 1s;
}
div:hover {
width: 200px;
background-image: linear-gradient( to right, red, yellow, blue, green);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<div>hello world</div>
</body>
</html>I would also like the blue to appear first and then the green.