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.
This lesson preview is part of the Fullstack D3 Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
[00:00 - 00:11] All right, so let's talk about CSS transitions. So in our example, we have an HTML file with this one box element here.
[00:12 - 00:18] We can see it over on the right. And there's also this styles.css file that we're importing as a style sheet.
[00:19 - 00:35] So if we look at this CSS file, we can see for our element with the class of box, specifying class with this period in front of the word. We want a blue background.
[00:36 - 00:44] It should be 100 pixels tall, 100 pixels wide. So these are CSS styles, which are used to style elements on the web page.
[00:45 - 00:55] And then we also have this hover. When we hover the box using the colon to specify this is only when the box is hovered over.
[00:56 - 01:08] We want to change the background to a yellow green and then scoot it over to the right about 30 pixels. So when we hover our box over here, we should see it moves and it changes its background color.
[01:09 - 01:25] Now this happens instantaneously, which can be a little bit jarring. So instead of having it turn green all at once, let's specify that we want it to happen over a period of two seconds.
[01:26 - 01:41] So we can do that by setting the transition duration, CSS property and let's set that to two seconds. Now this takes CSS time values so we can either do seconds or milliseconds.
[01:42 - 01:51] So two seconds is gonna be the same as 2000 milliseconds. And it's just up to you which format you prefer to use.
[01:52 - 02:09] So now when we hover it, it takes about two seconds to scoot over and to turn green. So say we only wanted the color to animate or we only wanted the position to animate but we want the color to change right away.
[02:10 - 02:32] We could change the transition property to let's make it the transform because that's how we're shifting it is the transform CSS property. So now when we hover it, the color changes instantly but the transform takes two seconds to complete.
[02:33 - 02:53] And by default, this transition property is all. So anything that is different when you hover it, it'll animate and we can go ahead and specify if we want it to be the transform, if we want it to be the background color that takes two seconds, it's really whatever we want.
[02:54 - 03:03] And another thing that's good to know is that there is a transition shorthand property. So we, this might get a little bit verbose.
[03:04 - 03:33] And if we wanted to type less, it's a little bit shorter to just have transition, the transition property takes, you need the name of the property, the duration and then there's an optional third property. So if we wanna transition the transform property and we want that to take two seconds, this is another way to write that.
[03:34 - 03:55] And then this third value that we can add to our transition shorthand property is an easing function. So right now we have a linear interpolation between the two states, basically every value in between takes the same amount of time.
[03:56 - 03:59] There are a lot of different easing functions. One good one is steps.
[04:00 - 04:09] So we can specify, we wanted to happen in steps and let's say we wanted to take six steps. So now it kind of jitters over like that, which is kind of fun.
[04:10 - 04:21] Another nice thing about this shorthand is we can have multiple transitions. So if we also wanted the background to transition, we could add another transition here.
[04:22 - 04:27] Let's say we want the background change over one second. So let's see what that looks like.
[04:28 - 04:46] So you can see the background changes more quickly than it shifts over. And another easing function is ease out, which I kind of like, it'll probably be a little bit more easy to see if we do it for the transform.
[04:47 - 05:14] So if we transform it over about 300 pixels, maybe you can see that it starts, it's jittering because it's moving away from the mouse so it's no longer covered when the mouse moved. But this ease out transition, it starts more quickly and then it slows down a little bit at the ends, which looks a little bit more realistic for certain transitions.
[05:15 - 05:37] So playing around with different easings can be really powerful. Another thing that's really good to know when you're dealing with CSS transitions is within the Chrome dev tools, if we inspect this element, let's take some minute with code sandbox.
[05:38 - 05:47] But here we go. We inspect our box and then we open up this bottom panel by hitting escape.
[05:48 - 06:30] There's an animations tab. So if we open that and we animate our box, we can see we're storing these animations here so that if I wanted to inspect it or debug this animation, I could kind of step through it, go forwards, go backwards and it'll store each of the animations that happens with this element when I'm looking at this animations tab so that if it doesn't exactly look great, this is a nice way to kind of investigate what's going on so you can see on the top, it's our background colors changing and on the bottom it's our transform.
[06:31 - 06:45] And you can also edit these transitions if you wanted to feel out something a little bit different. So up next we're gonna talk about how to add these CSS transitions to our chart code.