Unlock this lesson and all 1072 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!

# Use Keyframes for Fine-Tuned Angular 2 Animations

2:15 Angular 2 lesson by

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 2 animation you want.

Get the Code Now
click to level up

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 2 animation you want.

DANIEL

Simple enough for a 4th grader, but you are still a long ways from the glory days of flash. Until you can mathematically relate every pixel on the screen to every other pixel, and do it over time (and in one line no less), you will always be, by definition,... an inferior user interface to flash.

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.

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.

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.

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

It's going to go nice and slow at the beginning, then quickly from 0.1 to 5.0, because that's a big jump, and then quickly from 5.0 to 0.9, and then slowly from 9.0 to 95, then slowly from 95 to 1.0.

You'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.

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.

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.

Featured course:

#### Save time avoiding common mistakes using RxJS

HEY, QUICK QUESTION!