D3 with CSS Transition Animation

Question

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

Here is my JavaScript code in visual.coffee :

  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)

Here is my style.css :

.bubble {
    fill: black;
}

.bubble-hover {
    fill: red;
}

If we follow the normal CSS animation route, I'd write a animation, like this:

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

.bubble {
    fill: black;
}

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

But this doesn't seem to work. So I figured I should work with D3's transition() . Unfortunately, my CoffeeScript skill is not solid, so I hope to get some help achieve this. Thanks!

Answer 1

As @arjabbar pointed out, I forgot about the vendor prefixes. So basically what I need to do is to define

@-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;
}

This is a CSS solution to my problem, which is fine. If someone would like to solve it with d3 and CoffeeScript, I'd be happy to learn and choose it as the correct answer instead.