title: D3 with CSS Transition Animation
body: <p>I am creating a bubble chart with D3. When I hover on each bubble, some information about that bubble appears and the color of the bubble changes, which is working properly now. What I want to do next is to make the color changing more nuanced. I was trying to create an animation with CSS with no avail</p>
  
  <p>Here is my JavaScript code in <strong>visual.coffee</strong>:</p>
  
  <pre><code>  mouseover = (d) -&gt;
      node.classed("bubble-hover", (p) -&gt; groupValue(p) == groupValue(d))
      d3.select("#group-info").html(d.group)
  
    mouseout = (d) -&gt;
      node.classed("bubble-hover", false)
  </code></pre>
  
  <p>Here is my <strong>style.css</strong>:</p>
  
  <pre><code>.bubble {
      fill: black;
  }
  
  .bubble-hover {
      fill: red;
  }
  </code></pre>
  
  <p>If we follow the normal CSS animation route, I'd write a animation, like this: </p>
  
  <pre><code>@keyframes gradual {
      0% { fill: black; }
      100% { fill: red; }
  }
  
  .bubble {
      fill: black;
  }
  
  .bubble-hover {
    animation: gradual 2s 1;
  }
  </code></pre>
  
  <p>But this doesn't seem to work. So I figured I should work with D3's <code>transition()</code>. Unfortunately, my CoffeeScript skill is not solid, so I hope to get some help achieve this. Thanks!</p>