CSS Transition - why does my code not work?

Question

Quite a simple one but I'm sure I'm doing something wrong; the following code doesn't work in either Chrome or Firefox (ie, it displays as would be expected without the transition property, with the element immediately switching from blue to red):

.button {
  background-color: blue;
  transition: background-color, 5s, ease, 0s;
}

.button:hover {
  background-color: red;
}

<div class="button">Hello world</div>

What am I missing here?

Does this answer your question? [Transition of background-color](https://stackoverflow.com/questions/4411306/transition-of-background-color) — Mister Jojo, May 16 '22 at 16:59

score 1 · Accepted Answer · answered May 16 '22 at 16:54

1

transition properties should not be separated with commas

.button {
  background-color: blue;
  transition: background-color 5s ease;
}

.button:hover {
  background-color: red;
}

<div class="button">Hello world</div>

answered May 16 '22 at 16:54

James

623
7
17

Thank you! I knew it'd probably be something simple and obvious, I just wasn't seeing it. – Matt Bowyer May 17 '22 at 10:23

score 1 · Answer 2 · answered May 16 '22 at 16:55

1

There should be no commas in transition: background-color, 5s, ease, 0s;

.button {
  background-color: blue;
  transition: background-color 5s ease 0s;
}

.button:hover {
  background-color: red;
}

<div class="button"> Hello world </div>

answered May 16 '22 at 16:55

Juan Mendes

85,853
29
146
204

CSS Transition - why does my code not work?

2 Answers2