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

**(Select all that apply.)** Which of the following  CSS animation options are customizable? 


<p><strong>(Select all that apply.)</strong> Which of the following  CSS animation options are customizable?</p>


**(Select all that apply.)** Which of these events are emitted over the lifetime of a CSS transition? 


<p><strong>(Select all that apply.)</strong> Which of these events are emitted over the lifetime of a CSS transition?</p>


```scss
.element {
    opacity: 1;
    &:hover {
        opacity: 0.5;
    }
}
```

```scss
.element {
    opacity: 1;
    transition: opacity 1s;
    &:hover {
        opacity: 0.5;
    }
}
```

```scss
.element {
    opacity: 1;
    &:hover {
        animation-name: fade;
        animation-duration: 1s;
        animation-iteration-count: 3;
    }
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
```

```scss
.element {
    opacity: 1;
    &:hover {
        animation-name: fade;
        animation-duration: 1s;
    }
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
```

How would you animate an element's opacity from `1` to `0.5` with a duration of one second three times when the user hovers over it using CSS animations?

<p>How would you animate an element’s opacity from <code>1</code> to <code>0.5</code> with a duration of one second three times when the user hovers over it using CSS animations?</p>


The button shrinks and expands once for three seconds.

The button shrinks and expands with a duration of one second each and runs three times.

The button shrinks and expands three times in one second.


The button shrinks and expands every three seconds.

What is the expected behavior of the code below as the `isPulsing` flag changes from `false` to `true`?


```html
<button
    class="my-button"
    [class.pulse]="isPulsing">
    Button
  </button>
```

```scss
.my-button {
    &.isPulsing {
        animation-name: pulse;
        animation-duration: 1s;
        animation-iteration-count: 3;
    }
}

@keyframes pulse {
  0% {
    transform: scale(1,1);
  },
  50% {
    transform: scale(0.7,0.7);
  }
  100% {
    transform: scale(1,1);
  }
}
```


<p>What is the expected behavior of the code below as the <code>isPulsing</code> flag changes from <code>false</code> to <code>true</code>?</p>
<pre><code class="language-html">&lt;button
    class=&quot;my-button&quot;
    [class.pulse]=&quot;isPulsing&quot;&gt;
    Button
  &lt;/button&gt;
</code></pre>
<pre><code class="language-scss">.my-button {
    &amp;.isPulsing {
        animation-name: pulse;
        animation-duration: 1s;
        animation-iteration-count: 3;
    }
}

@keyframes pulse {
  0% {
    transform: scale(1,1);
  },
  50% {
    transform: scale(0.7,0.7);
  }
  100% {
    transform: scale(1,1);
  }
}
</code></pre>


The button spins for 0.5 seconds when the user hovers over it.

The button spins indefinitely when hovered over and keeps spinning even after the user stops hovering over it.

The button spins indefinitely when hovered over and stops spinning when the user stops hovering over it.

The button spins by default and stops spinning when the user hovers over it.

What is the expected animation output of the code below as the user hovers over the button?

```html
<button>Button</button>
```

```scss
button {
    &:hover {
        animation-name: spin;
        animation-duration: 0.5s;
        animation-iteration-count: infinite;
    }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
```

<p>What is the expected animation output of the code below as the user hovers over the button?</p>
<pre><code class="language-html">&lt;button&gt;Button&lt;/button&gt;
</code></pre>
<pre><code class="language-scss">button {
    &amp;:hover {
        animation-name: spin;
        animation-duration: 0.5s;
        animation-iteration-count: infinite;
    }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</code></pre>


Before We Start

CSS Transitions

CSS Animations

Web Animations API (WAAPI)

Angular Animations

Third-party Animation Libraries

Appendix

Conclusion

Quiz Yourself: CSS Animations