---
title: Using CSS Transitions
localeTitle: Использование переходов CSS
---
## Использование переходов CSS

**CSS переходы** предоставляют способ контролировать скорость анимации, при изменении CSS свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с css переходами, измения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.

Анимации, составляющие переход между двумя состояниями, часто называют неявными переходами, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером.

В данном примере вы моежет видеть красный <div> элемент размерами 100px * 100px. Для этого элемента также задано свойство перехода для свойства `width` с длительностью в 2 секунды:

```css
div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
}

div:hover {
    width: 300px;
}
```
Если навести курсор мыши на этот элемент `div`, то вы увидите, что ширина этого элемента постепенно меняется в течение 2 секунд.
[Демо](https://codepen.io/anon/pen/GYedKV)

#### Дополнительная информация:
[Подробная статья об использовании CSS переходов](https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)