You learned the basics of Angular animations in the [introduction](guide/animations) page.

This guide goes into greater depth on special transition states such as `*` \(wildcard\) and `void`, and shows how these special states are used for elements entering and leaving a view.

This chapter also explores multiple animation triggers, animation callbacks, and sequence-based animation using keyframes.

In Angular, transition states can be defined explicitly through the [`state()`](api/animations/state) function, or using the predefined `*` \(wildcard\) and `void` states.

This lets us add new states without having to include separate transitions for each one.

In general, use wildcard states when an element in one particular state has multiple potential states that it can change to.

Thus, you can apply other transitions on top of the `* => *` \(any-to-any\) transition.

For example, define style changes or animations that would apply just to `open => closed`, or just to `closed => open`, and then use `* => *` as a fallback for state pairings that aren't otherwise called out.

So, use the aliases `:enter` and `:leave` to target HTML elements that are inserted or removed from a view.

As a rule of thumb consider that any element being added to the DOM by Angular passes via the `:enter` transition, but only elements being directly removed from the DOM by Angular pass via the `:leave` transition \(For example, an element's view is removed from the DOM because its parent is being removed from the DOM or the app's route has changed, then the element will not pass via the `:leave` transition\).

In the component file, the `:enter` transition sets an initial opacity of 0, and then animates it to change that opacity to 1 as the element is inserted into the view.

The `transition()` function takes additional selector values, `:increment` and `:decrement`.

If a trigger contains a boolean value as a binding value, then this value can be matched using a `transition()` expression that compares `true` and `false`, or `1` and `0`.

In the component code, inside the `@Component` metadata under the `animations:` property, when the state evaluates to `true` \(meaning "open" here\), the associated HTML element's height is a wildcard style or default.

When the element is "closed", the element gets animated to a height of 0, which makes it invisible.

For a child animation to run, the parent animation must query each of the elements containing child animations and then let the animations run using the [`animateChild()`](api/animations/animateChild) function.

A special animation control binding called `@.disabled` can be placed on an HTML element to disable animations on that element, as well as any nested elements.

When an element within an HTML template has animations disabled using the `@.disabled` host binding, animations are disabled on all inner elements as well.

You can't selectively disable multiple animations on a single element.

However, selective child animations can still be run on a disabled parent in one of the following ways:

To disable all animations for an Angular app, place the `@.disabled` host binding on the topmost Angular component.

For example, you could set up the **InProgress** button to have its own looping animation where it pulsates or does some other visual motion while the backend system operation finishes.

Then, another animation can be called when the current animation finishes.

An animation can influence an end user to *perceive* the operation as faster, even when it isn't.

Thus, a simple animation can be a cost-effective way to keep users happy, rather than seeking to improve the speed of a server call and having to compensate for circumstances beyond your control, such as an unreliable network connection.

The previous section features a simple two-state transition.

Let's now create an animation with multiple steps run in sequence using *keyframes*.

Angular's `keyframe()` function is similar to keyframes in CSS.

Keyframes allow several style changes within a single timing segment.

For example, the button, instead of fading, could change color several times over a single 2-second timespan.

Offsets are relative measures from zero to one, marking the beginning and end of the animation, respectively and should be applied to each of the keyframe's steps if used at least once.

* A keyframes sequence inserted in the middle that causes the button to appear to pulsate irregularly over the course of that same 1-second timeframe

You can also provide the value as a number \(thus not providing a unit\), in such cases Angular assumes a default unit of pixels, or `px`.

The string `"50"` would instead be considered invalid\).

Sometimes you don't know the value of a dimensional style property until runtime.

In these cases, you can use a special wildcard `*` property value under `style()`, so that the value of that particular style property is computed at runtime and then plugged into the animation.

The `keyframes()` function in Angular allows you to specify multiple interim styles within a single transition, with an optional `offset` to define the point in the animation where each style change should occur.

@reviewed 2022-02-28