**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)
