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.
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
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!
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 (