Loading
Current section: Animation 7 exercises
solution

Implementing a Wave Animation Delay

Transcript

00:00 All right, this one's pretty quick and simple. Let's dive right in. So for the Epic Stack logo, we are going to add an animation delay of 0.5 seconds at the Excel breakpoint. So here, Excel, animate slide left, and Excel, remember we did an arbitrary property, animation delay of 0.5s.

00:20 So now if I refresh, you can see that the logo waits half a second and now is before these two because we haven't implemented the delay of these delays. Nice, removing the comment here. And next, we're going to do the H1 tag. So here again, increase by half a second. So it was at 0.3 and we're going to change that to 0.8.

00:40 You can see it's 0.3 seconds by default, but now at the Excel breakpoint, we bump it up to 0.8. And let's do the last one. It's at 0.8 and then at Excel, we're gonna go with 1.3 seconds. So everything is bumped by half a second. And now when I refresh the page, hopefully you will feel this wave starting top left

01:02 and going through and then into the content section. Ready? Let's look at it once again. And you can see that the logo list and the paragraph finish at the same time. And I think that makes things a little bit more balanced. All right, we could know that on this animation forever for weeks and weeks, but let's stop right there. I think we are in a good spot.

01:25 I am pretty sure that the designers will be surprised and delighted.