David Khourshid
Microsoft
Check out a free preview of the full CSS Animations and Transitions course
The "Composing Animations" Lesson is part of the full, CSS Animations and Transitions course featured in this preview video. Here's what you'd learn in this lesson:
David composes animations using a wrapper element to allow the transform property to be animated in two different ways. Since the button's transform property is already being used to animate its position with the slide-up animation, the shake animation is applied to a wrapper element.
Preview
CloseTranscript from the "Composing Animations" Lesson
[00:00:00]
>> Could you add a shake animation to the button in addition with a slide up animation?
>> At the same time, you cannot. And so the reason that you can't do it at the same time is just like we talked about before, those are trying to modify the same property.
[00:00:18]
So, let's actually try that, because I do want to provide a solution for that as well. Let's say that on the button. Yeah, so I'm just gonna copy over this button thing. Actually, you know what, I'll make it easy, I'll do it over here. All right, so let's say that we want to slide up but we also want to shake as well.
[00:00:45]
So the problem over here is it's going to take the second one, and it's only going to shake because both of them are trying to fight for that transform property or yeah, the transform property and those are gonna be in conflicts with each other. So how do you solve this?
[00:01:04]
Well, right now in CSS, you actually have to wrap this in a wrapping class. So, sorry, in a container elements. So let me just put a div over here and we're gonna call this, div button-wrapper. Again, call it whatever you want, but now if I have button-wrapper, and so this is no longer the child.
[00:01:32]
So I'll just do that. Then what we could do is we could apply the shake animation to the button-wrapper, and the slide-up animation to the button. So if I do that, Now. Interesting, so both should happen. We do have the slide-up, I probably took the delay off or something like that, so let's just remove that.
[00:02:07]
Yeah, that is what I did. So here we go. So, hopefully you saw that, and this is why the Animation panel is really, really useful. But the shaking is happening at the same time. If I just reload this. The shaking is happening at the same time as the sliding up or at least it should be.
[00:02:34]
Yeah, so you see it's shaking a little [LAUGH] as we're sliding up to. So yeah, the answer to that is if you do wants nested animations, use a container elements unless you're animating different properties, and in that case, you could just use the same elements
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops