CSS transitions
We learn about CSS transitions and the different CSS transition properties, then run through a concrete example and look at how to debug them.
Many of our chart changes can be transitioned with the CSS transition
property. When we update a <rect>
to have a fill of red instead of blue, we can specify that the color change take 10 seconds instead of being instantaneous. During those 10 seconds, the <rect>
will continuously re-draw with intermediate colors on the way to red.
Let's try out an example! In our example, you'll see a blue box that moves and turns green on hover.

Let's open up the
styles.css
file to take a look at what's going on. We can see our basic styles for the box.
.box {
background: cornflowerblue;
height: 100px;
width: 100px;
}
And our styles that apply to our box when it is hovered (change the background color and move it 30 pixels to the right).
.box:hover {
background: yellowgreen;
transform: translateX(30px);
}
To create CSS a transition, we need to specify how long we want the animation to take with the transition-duration
property. The property value accepts time CSS data types — a number followed by either s
(seconds) or ms
(milliseconds).
Let's make our box changes animate over one second.
.box {
background: cornflowerblue;
height: 100px;
width: 100px;
transition-duration: 1s;
}
Now when we hover over the box, we can see it slowly move to the right and turn green. Smooth!

This page is a preview of Fullstack D3 Masterclass