Angular 2 comes with a robust animation system built-in, but it requires an understanding of a combination of triggers, states, styles, and animations. This course walks you through each of the animation features so you can start building out your own Angular 2 animations.

This Angular 2 course assumes knowledge of some fundamentals.
We have an Angular 2 course that will [Get you started](https://egghead.io/series/angular-2-fundamentals)

Triggers are a special type of directive prefixed with an “@” that allow your elements to be bound to defined animations in the @Component decorator. Each trigger is represented by a defined animation trigger and each trigger can support many states.

angular

Define an Angular Trigger and State

Triggers work in combination with states to define ways of getting from one state to the next. This lesson covers how to create multiple states then cause the trigger assignment to update from one state to the next.

Switch Between Angular States on a Trigger

The foundation of animation in Angular is using transitions to move from one state to another state. Transitions bring in the concept of time and how long it should take to go from one state to the next while they almost magically calculate the difference in values over time between the CSS properties of each state.

Animate Between Angular States Using Transitions

Each trigger starts with an “undefined” state or a “void” state which doesn’t match any of your currently defined states. You have to be aware of when you’re in that state so that you don’t stumble on any undesired behaviors. This is especially important if your transitions cover “*”/all states because “void” is part of “all”.

Control Undefined Angular States with void State

A common use-case for an Angular animation is to animate an element into the DOM. This is achieved with a combination of ngIf and the “void” state so that you have complete control over how the element appears and how it leaves.

Animate Adding and Removing Angular Elements with ngIf

By default, transitions will appear linearly over time, but proper animations have a bit more customization to them by delaying when they start and controlling how slowly or quickly they move over time.

Delay and Ease Angular Animations

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

Use Keyframes for Fine-Tuned Angular Animations

You often want to re-use a transition when going between the same two states. Angular transition syntax allows you to define how the transition should be applied between states: one-way or two-way.

Animate Angular 2 Web Applications

John Lindquist

Course Content