CSS Transition - 为什么我的代码不起作用？

Question

很简单，但我确定我做错了什么；以下代码在 Chrome 或 Firefox 中均无效（即，它显示为没有转换属性的预期，元素立即从蓝色切换为红色）：

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

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

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

我在这里错过了什么？

Answer 1

transition 属性不应该用逗号分隔

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

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

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

Answer 2

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>

CSS Transition - why does my code not work?