From the course: Angular: Animations

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Stepped animation with keyframes

Stepped animation with keyframes - Angular Tutorial

From the course: Angular: Animations

Start my 1-month free trial

Stepped animation with keyframes

- While a delay will offset the beginning of an entire animation for a certain amount of time, what if we wanted to build a series of property values, such as color, which animate at different times? This can be done through the use of key frame offset definitions attached to each animateable property. Let's have a look. The first thing we'll do is go back to our basic component and insert a new button into our button group so right below our easing button, let's paste a new one, which will set our state to "stepped." And it's got the label of "stepped animation." We'll save that, and then pop over again to animbox component. Now to use stepped key frame animations, we're going to have to include something additional up here in our imports and that is key frames. So we'll include key frames from angular animations and then just like every one of our states, for this one we'll create an additional state here called, "stepped," and all this is doing is setting our background color and…

Contents