Charts communicate ideas with simplicity, clarity, and detail.

Once you're comfortable with D3 you can quickly:

* understand key metrics at a glance
* catch anomalies (before they turn into problems)
* give key insights to your customers
* and impress your boss and co-workers

Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.

The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.

Fullstack D3 Masterclass

---
title: "CSS transitions"
description: "We learn about CSS transitions and the different CSS transition properties, then run through a concrete example and look at how to debug them."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/bjxk1p47n5
codeFolder: course/module_03/lesson_03.01/protected/code/04-animations-and-transitions/end
---

# CSS transitions

<CodeSandboxEmbed
  src="//codesandbox.io/s/f79sh?fontsize=14&hidenavigation=1&theme=dark&autoresize=1&module=/chart.js"
  style={{width: '100%', height: '35em'}}
/>

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](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_03/lesson_03.01/public/images/4-animations-and-transitions/css-transition.png)

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.

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

```css
.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.

```css
.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!

![box transition all](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_03/lesson_03.01/public/images/4-animations-and-transitions/css-transition-all.png)

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

We learn about CSS transitions and the different CSS transition properties, then run through a concrete example and look at how to debug them.