While delay will offset the beginning of an entire animation for a certain amount of time, what if it was necessary to build a series of property values, such as color, which animate at different times? This can be done through the use of keyframe offset definitions attached to each animatable property. Define a series of keyframes across your animation which control various property transitions.
- 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 scale,…just like every one of the others does.…
- Installing the Angular CLI
- Creating a new project
- Verifying the animations package
- Configuring project routes
- Animating components
- Triggering animation between states
- Stepped and parallel animation
- Writing reusable animations
- Animating individual items with query and stagger
- Animating an existing Angular project
Skill Level Intermediate
1. Getting Ready to Animate
2. Enabling Angular Animations
3. Angular Animation Basics
4. Advanced Angular Animation
5. Animating an Existing Interface
6. Package for Distribution
Building the project1m 56s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.