transition 2s not working for linear-gradient()

Question

Hello i have this div with linear-gradient().

On hover the div takes 2 seconds to expand to 200px width and to ad blue and green to the linear-gradient().

But blue and green are added immediately while it does take 2 seconds to expand.

Does anyone know the answer to that.

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

Also i would like the blue to appear first and then the green.

Does this answer your question? [CSS3 background image transition](https://stackoverflow.com/questions/9483364/css3-background-image-transition) — Ahmed Ali, Dec 28 '20 at 09:31

score 1 · Accepted Answer · answered Dec 28 '20 at 09:34

1

You don´t need to change the background image, just make it be the final size, and let the growing div show more or less of it

div {
  background-image: linear-gradient( to right, red, yellow 100px, blue, green);
  background-color: red;
  background-size: 200px;
  width: 100px;
  border: 2px solid black;
  border-radius: 5px;
  transition: 1s;
}
div:hover {
  width: 200px;
}

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

answered Dec 28 '20 at 09:34

vals

61,425
11
89
138

I thought there was a bug with my avatar when I say your answer :p – Temani Afif Dec 28 '20 at 09:36
@TemaniAfif I am not sure that I understand you. You mean, because I seldom post answers lately ? – vals Dec 28 '20 at 16:28
1

no, we posted the *exact* same answer at the *exact* same time and when I went back to review I got a bit surprised ;) – Temani Afif Dec 28 '20 at 18:35

score 0 · Answer 2 · answered Dec 28 '20 at 09:33

you can use background size for transition linear-gradient, because linear-gradient can not transition.

div {
  background-image: linear-gradient( to right, red, yellow, blue, green);
  background-color: red;
  width: 100px;
  border: 2px solid black;
  border-radius: 5px;
  transition: 1s;
  background-size: 200% 200%;
}
div:hover {
  width: 200px;
  background-size:100% 100%;
}

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

transition 2s not working for linear-gradient()

2 Answers2