CSS Transition - why does my code not work?

Issue

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?

Solution

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 By - James