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.

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!

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).