# CSS Transition

Свойство `transition` используется для управления скоростью изменения CSS свойств. Например, при наведении курсора мыши на кнопку, вы хотите сделать ее темнее. Но чтобы изменение цвета произошло не мгновенно, а плавно, в течение 200 миллисекунд.

По сути, это способ задать замедление при переходе элемента из одного состояния в другое.

Transition включает в себя следующие подсвойства (указываются или в одну строку в данном порядке без запятых, или отдельно, сохраняя порядок значений относительно перечисленных свойств в transition-property):

| Подсвойство                    | Значение по умолчанию |
| ------------------------------ | --------------------- |
| **transition-property**        | `all`                 |
| **transition-duration**        | `0s`                  |
| **transition-timing-function** | `ease`                |
| **transition-delay**           | `0s`                  |

Например:

```css
div {
  transition: margin-left 0.4s ease-in-out 0.2s;
}
```

Данный код означает, что для всех элементов `div`, при изменении свойства `margin-left`, такое изменение будет происходить постепенно в течение 400 миллисекунд (с задержкой 200 миллисекунд), используя функцию `ease-in-out`.

Transition может применяться ко всем элементам, а также псевдоэлементам `::before` и `::after`.

Измененное состояние элемента может быть определено через `:hover`, `:active` или дополнительный класс.

> **Примечание:**
>
> Transition поддерживает описание нескольких анимаций, в таком случае они перечисляются через запятую.

**Пример:**

_(в одну строку записан transition для свойств background-color, transform и border-radius)_

HTML

```html
<div class="el"></div>
```

CSS

```css
.el {
  width: 100px;
  height: 100px;
  margin: 50px;
  background-color: mediumseagreen;
  transition: background-color 0.5s ease-in-out 0.3s, transform 1s, border-radius 1s;
}

.el:hover {
  transform: rotate(180deg);
  background-color: lightcoral;
  border-radius: 50%;
}
```

Результат будет выглядеть так:

![transition0](https://dan-it.gitlab.io/fe-book/programming_essentials/html_css/lesson13_animation_parallax/img/transition-0.gif)

[Открыть пример на CodePen](https://codepen.io/anjest/pen/povBzxX)

**transition-property**

Свойство `transition-property` указывает одно или несколько имен свойств, для которых применяется замедление перехода из одного состояния в другое.

Не все свойства поддерживают анимацию. Она доступна тем свойствам, которые влияют на визуальное отображение элемента (размеры, цвет, прозрачность, границы, позиционирование и т.д.).

Если необходимо применить анимацию ко всем изменяемым свойствам, используйте значение `all`

```css
div {
  transition: all 0.4s;
}
```

или не указывайте его вообще, так как `all` является значением по умолчанию:

```css
div {
  transition: 0.4s;
}
```

> **Важно!**
>
> Избегайте применения transition к свойствам с значением **auto**. Это может привести к непредсказуемым последствиям из-за разной поддержки данного значения браузерами.

**transition-duration**

Данное свойство указывает продолжительность перехода (в секундах).

Пример:

HTML

```html
<div class="el el-1">0.2s</div>
<div class="el el-2">0.5s</div>
<div class="el el-3">1.2s</div>
```

CSS

```css
.el {
  width: 100px;
  height: 100px;
  margin-top: 50px;
}

.el:hover {
  margin-left: 50px;
}

.el-1 {
  background-color: green;
  transition: margin-left 0.2s;
}

.el-2 {
  background-color: red;
  transition: margin-left 0.5s;
}

.el-3 {
  background-color: blue;
  transition: margin-left 1.2s;
}
```

![transition1](https://dan-it.gitlab.io/fe-book/programming_essentials/html_css/lesson13_animation_parallax/img/transition-1.gif)

[Открыть пример на CodePen](https://codepen.io/anjest/pen/YzPMKvx)

**transition-timing-function**

Данное свойство описывает функцию, по которой вычисляются промежуточные значения свойств.

**Значения transition-timing-function:**

|          |                                                       |
| -------- | ----------------------------------------------------- |
| `linear` | анимация проходит линейно, без ускорений и замедлений |

| **Функции Безье** |                                                                                                 |
| ----------------- | ----------------------------------------------------------------------------------------------- |
| `ease`            | значение по умолчанию, анимация проходит плавно с небольшим замедлением в начале и к завершению |
| `ease-in`         | анимация замедлена в начале и ускоряется к завершению                                           |
| `ease-out`        | анимация ускорена в начале и замедляется к завершению                                           |
| `ease-in-out`     | анимация ускоряется к середине и замедлена в начале и к завершению                              |

| **Пошаговые функции**            |                                                                                                             |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| `step-start`                     | делит анимацию на 1 интервал (шаг) и запускает её в начале временного отрезка, аналогично `steps(1, start)` |
| `step-end`                       | делит анимацию на 1 интервал и запускает её в конце временного отрезка, аналогично `steps(1, end)`          |
| `steps( integer, step-position)` | ступенчатая функция, принимает два параметра: количество шагов и положение шага                             |

Рассмотрим эти свойства на практике.

**Функции Безье** используются для плавной анимации. Они позволяют задавать неравномерную скорость изменения элемента, например, ускорение и замедление.

Ниже приведены наглядные примеры передвижения блоков с одинаковой продолжительностью анимации и разными значениями timing-function.

_(продолжительность анимации у всех блоков 2 секунды - `2s`)_

![transition2](https://dan-it.gitlab.io/fe-book/programming_essentials/html_css/lesson13_animation_parallax/img/transition-2.gif)

[Открыть пример на CodePen](https://codepen.io/anjest/pen/KKwYKzK)

**Пошаговые функции** используются для "прерывистого" изменения элемента. Они разбивают полную продолжительность анимации на равные интервалы и фиксируют промежуточное состояние.

_(продолжительность анимации `0.5s`)_

![transition3](https://dan-it.gitlab.io/fe-book/programming_essentials/html_css/lesson13_animation_parallax/img/transition-3.gif)

Вернемся к пошаговой функции **steps( integer, step-position)**. Integer - целое число больше 0, указывающее количество шагов (однако, если вторым параметром является `jump-none`, то integer должен быть больше 1). Положение шага (step-position) - необязательный параметр, указывает момент, в который начинается анимация, имеет следующие значения:

| **step-position** |                                                                                                                         |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `jump-start`      | анимация начинается с нулевого отрезка времени                                                                          |
| `start`           | аналогично `jump-start`                                                                                                 |
| `jump-end`        | анимация начинается с первого отрезка времени                                                                           |
| `end`             | аналогично `jump-end`                                                                                                   |
| `jump-none`       | продолжительность функции делится на (iteration + 1), анимация начинается и заканчивается паузой длинной в один отрезок |
| `jump-both`       | продолжительность функции делится на (iteration + 1), анимация начинается и заканчивается шагом                         |

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

_(продолжительность анимации - 2 секунды `2s`, количество шагов - `4`)_

![transition4](https://dan-it.gitlab.io/fe-book/programming_essentials/html_css/lesson13_animation_parallax/img/transition-4.gif)

[Открыть пример на CodePen](https://codepen.io/anjest/pen/NWPmWzP)

**transition-delay**

Данное свойство определяет задержку старта анимации.

Пример:

```html
<div class="el el-1">0s</div>
<div class="el el-2">0.6s</div>
```

```css
.el {
  transition-duration: 0.5s;
}

.el-2 {
  transition-delay: 0.6s;
}
```

![transition5](https://dan-it.gitlab.io/fe-book/programming_essentials/html_css/lesson13_animation_parallax/img/transition-5.gif)

_(у первого блока transition-delay не указан, у второго - `0.6s`, анимация начинается через 0.6 секунд)_

**Порядок значений**

Если подсвойства transition указывать раздельно, их значения будут соответствовать порядку `transition-property`.

Например:

```css
div {
  width: 100px;
  height: 50px;
  transition-property: width, height;
  transition-duration: 0.5s, 0.3s;
}
```

Для `width` transition-duration будет равен 0.5s, для `height` - 0.3s.

Если какой-то из списков свойств длиннее, чем transition-property, то он обрезается:

```css
div {
  width: 100px;
  height: 50px;
  transition-property: width, height;
  transition-duration: 0.5s, 0.3s, 0.1s;
}

/* width 0.5s, height 0.3s */
```

Если же он короче, то недостающие значения дублируются из начала списка:

```css
div {
  transition-property: width, height, margin-left;
  transition-duration: 1s, 0.2s;
}

/* width 1s, height 0.2s, margin-left 1s */
```

```css
div {
  transition-property: width, height, margin-left, opacity, color;
  transition-duration: 1s, 0.2s, 0.5s;
}

/* width 1s, height 0.2s, margin-left 0.5s, opacity 1s, color 0.2s */
```

### Поддержка браузерами <a href="#podderzhka-brauzerami" id="podderzhka-brauzerami"></a>

Transition поддерживается всеми современными браузерами.

Chrome до версии 26.0, Safari, Android и iOS поддерживают нестандартное свойство `-webkit-transition`.

Opera до версии 12.10 поддерживает свойство `-o-transition`.

Firefox до версии 16.0 поддерживает свойство `-moz-transition`.
