CSS悬停过渡效果

Question

我有一个班级＆＃34;打开＆＃34;。

<td class="open"><a class="order-btn">פנוי</a></td>

我已经为背景实现了基本的过渡效果，但是更改仍然是立即的，没有持续时间。这是我的CSS。

.open{
  background: yellowgreen;
  color: black;
  transition: background 2s ease-in;
  -moz-transition: background 2s ease-in;/* Firefox 4 */
  -webkit-transition: background 2s ease-in; /* Safari and Chrome */
  -o-transition: background 2s ease-in; /* Opera */
}

.open:hover{
  background: radial-gradient(GreenYellow, yellowgreen);
}

非常感谢任何帮助。