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!