This video is available to students only

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.

CSS transitions#

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.

box transition

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.

And our styles that apply to our box when it is hovered (change the background color and move it 30 pixels to the right).

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.

Now when we hover over the box, we can see it slowly move to the right and turn green. Smooth!

box transition all

Now let's say that we only want to animate our box's movement, but we want the color change to happen instantaneously. This is possible by specifying the transition-property CSS property. By default, transition-property is set to all, which animates all transitions. Instead, let's override the default and specify a specific CSS property name (transform).

 

This page is a preview of Fullstack D3 Masterclass

Please select a discussion on the left.