freeCodeCamp/guide/russian/css/using-css-transitions/index.md

title, localeTitle

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

Использование переходов CSS

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

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

В данном примере вы моежет видеть красный

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

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

div:hover {
    width: 300px;
}

Если навести курсор мыши на этот элемент div, то вы увидите, что ширина этого элемента постепенно меняется в течение 2 секунд. Демо

Дополнительная информация:

Подробная статья об использовании CSS переходов