⚠️ This lesson is retired and might contain outdated information.

Use Keyframes for Fine-Tuned Angular Animations

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 8 months ago

When easing isn’t enough to get the exact animation you want, you can leverage keyframes to define and precise styles and steps over time. Keyframes allow you to achieve pretty much any Angular animation you want.

[00:00] Now from our fine tuned control of transitions, let's do a transition from void to anything, so when we click that initial toggle button, we'll want an animation. We'll animate for five seconds, and then instead of using that string based syntax, we used below, I'm just going to say comma and keyframes.

[00:20] Now, you invoke keyframes, and you pass in an array of styles. Some of these styles are going to be steps throughout this five seconds. These styles are just like these styles where you invoke it and pass in an object.

[00:33] I'll say style, pass in an object of transform, and we'll scale this to zero, and then duplicate this a few times. We're going to have six steps here, and you can think of this as this five seconds being a zero to five based index where the first step is zero seconds, the second step is one second, third step is two seconds.

[00:58] This first step at zero seconds will be scaled to 0the second step will be scaled to 10 percent, the third step will be scaled to 50 percent, then we'll scale to 9.0and then 95 percent, and then all the way to 100 percent.

[01:15] It's going to go nice and slow at the beginning, then quickly from 01 to 5.0because that's a big jump, and then quickly from 5.0to 09, and then slowly from 9.0to 95, then slowly from 95 to 1.0You'll see this animation when I click toggle. You saw that initial speed from here to here, and then it slowed down in the middle, and then it went fast again. You can tweak these values as you want.

[01:47] I'll make the initial speed really fast, and then we can quickly scale it back down, and then scale it back up, then back down a little bit more, and then back to 100 percent, so this one will look kind of fun.

[01:59] We'll hit toggle, out and in, and back out, and in, and all the way to 100 percent. These styles will work on colors and any other CSS properties. Widths and heights, so you can go to town building crazy animations like this.

Jean-Francois
Jean-Francois
~ 7 years ago

Hi John! Great series. Thanks. Is there a way to animate components "ngOnBeforeDestroy" ?

Markdown supported.
Become a member to join the discussionEnroll Today