---
title: 🟢 Простые Анимации
description: Задача 46 заключается в изучении animation API интегрированного в Angular
author: sven-brodny
contributors:
  - webbomj
challengeNumber: 46
command: angular-simple-animations
sidebar:
  order: 17
---

## Информация

Это первое из двух заданий по анимации, цель этой серии - освоить анимацию в Angular.

Хорошо продуманная анимация может сделать ваше приложение более увлекательным и простым в использовании. Анимация может улучшить ваше приложение и пользовательский опыт несколькими способами:

- Без анимации переходы между веб-страницами могут казаться резкими и раздражающими.
- Движение значительно улучшает взаимодействие с пользователем, поэтому анимация дает возможность определить реакцию приложения на действия пользователей.
- Хорошая анимация интуитивно привлекает внимание пользователя к тому месту, где это необходимо.

Я бы порекомендовал вам ознакомиться с [официальной документацией](https://angular.dev/guide/animations). Вы узнаете все, что необходимо для успешного прохождения испытания.

В противном случае посмотрите на этот [рабочий пример](https://svenson95.github.io/ng-xmp-animations/) и [git repo](https://github.com/svenson95/ng-xmp-animations), чтобы вдохновиться.

## Пояснение

Цель этой задачи - добавить анимацию, она должна запускаться, когда пользователь заходит на страницу или перезагружает страницу.

## Constraints

- Не используйте никакой CSS и используйте интегрированный в Angular API `@angular/animations`.
- Не запускайте анимацию кнопкой, как в примерах, запускайте когда пользователь заходит на страницу или перезагружает ее.

### Уровень 1

Добавьте анимацию затухания или перемещения для абзацев с левой стороны.

<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/a43c3995-16ef-4d1f-bcfc-602b4ce80937">
</video>

### Уровень 2

Добавьте пошаговую (stagger) анимацию для списка справа.

<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/1a01af1b-44fc-4616-8793-681219f9d8bc">
</video>
