From the course: D3.js Essential Training

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Using CSS to create transitions

Using CSS to create transitions - D3.js Tutorial

From the course: D3.js Essential Training

Start my 1-month free trial Buy for my team

Using CSS to create transitions

“

- [Instructor] Often, the best way to animate our D3 visuals is actually to use CSS. It's less code, and it's easier to maintain. So let's take a look at the sorts of transitions we can achieve for our SVG elements with modern CSS. The first and simplest is just hover. CSS can do a great deal more than that. So, if we refresh the page now, you see, on hover, the fill becomes red, and we can even animate this, so we can slow it down by, say, if we say circle, and we're going to say we want the transition, the fill transition to take a second using an ease. There are different options here for kind of the velocity of the animation. So now if we refresh this, you see it takes its time changing the fill, and it's not just fill colors. We can change the size, for example. So we could say, on hover, I want to apply a transformation to scale up the size of the thing I'm hovering on, and then on our transition we say, comma, we want the transform to also take one second and use ease. And now…

Contents