Define an Angular Trigger and State

Switch Between Angular States on a Trigger

Animate Between Angular States Using Transitions

Control Undefined Angular States with void State

Animate Adding and Removing Angular Elements with ngIf

Delay and Ease Angular Animations

Use Keyframes for Fine-Tuned Angular Animations

Define Two-Way Transitions for Angular States

Animate Angular Web Applications

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.

Course

Animate Angular Web Applications

Use Keyframes for Fine-Tuned Angular Animations

Share this video with your friends