Check out a free preview of the full CSS In-Depth, v2 course:
The "Events & Transition Examples" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

All transitions have transitioned events in both directions of the transition, including the individual transitionable longhand properties of a shorthand property. Estelle walks through examples of using CSS transitions.

Get Unlimited Access Now

Transcript from the "Events & Transition Examples" Lesson

[00:00:02]
>> Estelle Weyl: There are events. So every transition event, every transitionend event, throws an event. So every property that is transitioned will throw an event. And so I talked about this earlier today, which is border-top-color, border-right-color, border-bottom-color, border-left, border-top-width, border-right-width, border-bottom-width, and border-left-width will have a transition event. And I made a mistake earlier today when I said there would be 12.

[00:00:30] There's a maximum of eight, because there's no midpoint between solid, and dotted, right? So that will not throw an animation event, or transitionend event, because it didn't actually transition. It will go instantly from one to the other, it will change, but it won't change over time.
>> Estelle Weyl: So every single property, and in both directions.

[00:00:57]
>> Estelle Weyl: So let me show you two examples of,
>> Estelle Weyl: transitions. Here, when I go over this, it opens up. And there's no JavaScript to make this navigation work, who uses JavaScript for this? Stop.
>> Speaker 2: Okay.
>> Estelle Weyl: [LAUGH] Most people use JavaScript, you're not the only one, cuz people don't realize how easy it is.

[00:01:25] So let's talk about how easy it is. So the navigation is actually there, but I scaled it to 0 pixels tall, and 100% of the original width. So why did I do that? Because I want to drop down. If I scaled it to 0, it would open up in both directions.

[00:01:49] But instead, I go like this, basically, and then I pop it down. I could've actually rotated it 180 degrees, and then brought it back down, but I put the top transitional origin at the top. So it starts from the top, and goes down. So I scale it from 1 to 0.

[00:02:08] The transform-origin is top, center, it transitions over, there should be a space right there, oops, over 200 milliseconds. 200 milliseconds is good. 200 milliseconds is enough for a user to get the line without getting the frustrated. You don't want them to notice that something is animating, but you want things to seem smooth.

[00:02:30] So when it pops in instantly, it's a little jarring, so just 200 milliseconds is good. But I did wait 50 milliseconds before it starts, just in case someone does that. I don't want that stuff to pop open when they don't intend to go over a link, right? So I put the position, absolute.

[00:02:50] So these drop-down menus are exactly 100% from the top of their parent, so they start right here at the white line. So when I hover over the word topics, right? These are also hovered because they are nested. Right now, I'm still hovering over the li of topics, because I'm in the nested ul inside of it.

[00:03:13] So when I hover over it, the hover state is just scaled at 100%. I could've just done scale 1, right? That would have worked, too. And let's just see, yep. I don't actually know if this slide is active or not, I think it is, anything down here? No.

[00:03:31] So my transition function is basically all, or just transform.
>> Estelle Weyl: My duration is 0.2 seconds, and I think I'd rather have an ease-in as a timing function. We'll cover timing functions in a little bit. That looks a little bit smoother than linear, I like that one better. And there's a 50 millisecond delay.

[00:04:01] I can't actually go off of these in the middle because they are a little bit too fast. But I can't force it to finish, you see that? But it still looks smooth. Okay, I'm not gonna cover that. So here, I'm going to pick a card. And here, I basically have two divs in each one.

[00:04:23] There's a front, and the back of the card. So there's a parent div called card, and there's a front, and a back, and I rotate them both. And then I do backface-visibility, none, on the one that says A. And since I'm cheating, and I only have aces, it would've actually looked the same if it was front-to-back, or not.

[00:04:43] Okay, the thing to note is I can't keep them flipped over, and this is really annoying. That's a problem with transitions.
>> Estelle Weyl: So here, you see where my mouse is? And that it's not over any single card? It's because it was over it when it started, and then it continued to move, and I didn't move the mouse.

[00:05:13] The second I move the mouse, it's gonna go back, you see that? Okay, so what did I do with the transition? The transform is rotateX(0deg), rotateY(0deg), and that is the front of the card. Preserve-3D, backface-visibility is hidden. And transition takes four-tenths of a second. The front on hover rotates 180 degrees, so it flips over.

[00:05:44] But there's backface-visibility, hidden, originally, oops.
>> Estelle Weyl: Okay.
>> Estelle Weyl: The back of the card, I rotated it negative 180. And then when I hover over it, I rotate it to 0, to default. And that's basically it. And I'm sick of this card, it's going forward, so I'm just gonna stop there.

[00:06:09] You can look at the code. But as you've seen, a lot of the features from the transitions, and from the transforms. So the idea with transforms is you declare which property you want to transform, how long it should take, the timing function, which we're gonna cover during animations, and the delay.

[00:06:29] And then you have to remember that it goes in one direction, one way, and then it reverses the direction on the way back. If you have five steps, it'll take five steps on the way back. If it's linear on the way in, it will be linear on the way back.

[00:06:43] If it's ease-in, on the way in, it'll be ease-out, on the way back.