Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

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



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



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

egghead.io comment guidelines

Avatar
egghead.io

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.

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:

Create an SVG Icon System

Create an SVG Icon System

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?