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 - Angular Tutorial
From the course: Angular: Animations
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
Preparing component interaction3m 1s
-
Establishing stateful data3m 15s
-
Triggering animation between states6m 22s
-
Delay and easing functions5m 24s
-
Stepped animation with keyframes4m 24s
-
Parallel animation with groups3m 15s
-
Animation callback functions4m 31s
-
Challenge: Clear the message text24s
-
Solution: Clear the message text1m 15s
-
-
-
-
-