Javascript D3与CSS过渡动画

我正在用D3创建一个气泡图。当我将鼠标悬停在每个气泡上时，会显示有关该气泡的一些信息，气泡的颜色也会发生变化，现在可以正常工作了。我接下来要做的是使颜色变化更加细微。我试图用CSS创建一个动画，但没有效果

下面是我在visual.coffee中的JavaScript代码：

  mouseover = (d) ->
    node.classed("bubble-hover", (p) -> groupValue(p) == groupValue(d))
    d3.select("#group-info").html(d.group)

  mouseout = (d) ->
    node.classed("bubble-hover", false)

.bubble {
    fill: black;
}

.bubble-hover {
    fill: red;
}

这是我的风格。css：

  mouseover = (d) ->
    node.classed("bubble-hover", (p) -> groupValue(p) == groupValue(d))
    d3.select("#group-info").html(d.group)

  mouseout = (d) ->
    node.classed("bubble-hover", false)

.bubble {
    fill: black;
}

.bubble-hover {
    fill: red;
}

如果我们遵循常规CSS动画路线，我会编写一个动画，如下所示：

@keyframes gradual {
    0% { fill: black; }
    100% { fill: red; }
}

.bubble {
    fill: black;
}

.bubble-hover {
  animation: gradual 2s 1;
}

---

但这似乎不起作用。所以我想我应该使用D3的

transition（）

。不幸的是，我的咖啡脚本技能并不扎实，所以我希望能得到一些帮助来实现这一点。谢谢

正如@arjabbar指出的，我忘记了供应商前缀。所以基本上我需要做的是定义

@-webkit-keyframes gradual {
    0% { fill: black; }
    100% { fill: red; }
}

@-moz-keyframes gradual {
    0% { fill: black; }
    100% { fill: red; }
}

@keyframes gradual {
    0% { fill: black; }
    100% { fill: red; }
}

.bubble {
    fill: black;
}

.bubble-hover {
  -webkit-animation: gradual 2s 1;  /* Chrome, Safari, Opera */
  -webkit-animation-timing-function: ease-in;  /* Chrome, Safari, Opera */
  -moz-animation: gradual 2s 1;  /* Chrome, Safari, Opera */
  -moz-animation-timing-function: ease-in;  /* Chrome, Safari, Opera */
  animation-timing-function: ease-in;
  animation: gradual 2s 1;
  fill: red;
}

---

这是解决我问题的CSS解决方案，很好。如果有人想用d3和CoffeeScript解决这个问题，我很乐意学习并选择它作为正确的答案。

您考虑过供应商前缀了吗@-webkit关键帧或@moz关键帧等？@arjabbar啊，我明白了。我忘了那些。让我添加它们，然后再试一次。我会让你知道的。谢谢。你好@arjabbar！你是对的。这正是问题所在。谢谢你的帮助！