Gain insights into creating beautiful, performant animations in Angular. Delve into CSS transitions, Web Animations API, and Angular animations, while exploring performance and debugging techniques.

angular.tar.gz

angular

Animations play a crucial role in an application’s user experience (UX). A set of well-designed animations can make an application feel fast, polished, and professional. However, creating animations can be a daunting task that involves knowing what is available and how to choose the right approach for each task.

You will start with the easiest methods and move on to more advanced animation methods as you make your way through this course. You’ll start with general animation techniques, covering CSS transitions, animations, and the Web Animations API, followed by Angular animations and integrating external animation libraries. Lastly, you’ll finish with a deep dive into animation performance and debugging.

This course will provide you with information and advice to help you create beautiful and performant animations in Angular applications. By the end of the course, you will be able to create performant animations and choose the right tools to create them effectively.

Animations in Angular

Well orchestrated animations can have a noticeable effect on the overall user experience. Transitions like the ones we covered in the previous lessons can help make an app feel more life-like. Let’s take a look at a couple of use cases, along with their code, to better understand CSS transitions in an app.


## CSS transition characteristics and their usage

Some key characteristics of CSS transitions include:

- They run once.
- They require an external trigger.
- They automatically run in reverse when the trigger is removed.

These characteristics make CSS transitions the perfect method to create simple animations when transitioning between states. These state transitions include pseudo-classes that are triggered by the user, such as `:hover`, `:active`, and `:focus`. We can also use CSS transitions to animate between our app-specific states. For example, an e-commerce app could use CSS transitions to animate between an item’s default and selected/added to cart state to create a smoother experience for the user.

Let’s take a look at some useful applications of CSS transitions and how these are implemented in an Angular application.


## Navbar hover and selected state


**Navbars** are a staple of most web applications and come in a few different forms, such as navigation drawers, bottom tabs, and the traditional top navigation bar. A common characteristic between these forms is that they have a hover state and selected/active state for each of the navigation items. We can use CSS transitions to animate between the default, hover, and selected state.

Let’s take a look at the navigation bar in the demo. We have three states:
- `default`: This displays gray text on a blue background.

- `hover`: This displays white text on a blue background with a white bottom border.
- `selected`: This displays blue text on a white background. Run the application and click the navigation item to see the CSS transition being used to apply the new styles.


# CSS transition characteristics and their usage

Some key characteristics of CSS transitions include:

- They run once.
- They require an external trigger.
- They automatically run in reverse when the trigger is removed.

These characteristics make CSS transitions the perfect method to create simple animations when transitioning between states. These state transitions include pseudo-classes that are triggered by the user, such as `:hover`, `:active`, and `:focus`. We can also use CSS transitions to animate between our app-specific states. For example, an e-commerce app could use CSS transitions to animate between an item’s default and selected/added to cart state to create a smoother experience for the user.

Let’s take a look at some useful applications of CSS transitions and how these are implemented in an Angular application.


# Navbar hover and selected state


**Navbars** are a staple of most web applications and come in a few different forms, such as navigation drawers, bottom tabs, and the traditional top navigation bar. A common characteristic between these forms is that they have a hover state and selected/active state for each of the navigation items. We can use CSS transitions to animate between the default, hover, and selected state.

Let’s take a look at the navigation bar in the demo. We have three states:
- `default`: This displays gray text on a blue background.

- `hover`: This displays white text on a blue background with a white bottom border.
- `selected`: This displays blue text on a white background. Run the application and click the navigation item to see the CSS transition being used to apply the new styles.


Apply what we've learned about CSS transitions and their characteristics to some common use cases.

Before We Start

CSS Transitions

CSS Animations

Web Animations API (WAAPI)

Angular Animations

Third-party Animation Libraries

Appendix

Conclusion

Real World Use Cases

CSS transition characteristics and their usage