Что такое css переход

CSS-переход (transition) — это анимационный эффект, который позволяет плавно изменять свойства элемента во время изменения состояния.

Переход можно задать для любого свойства CSS, например, цвета (color), высоты (height), ширины (width), положения (position), фона (background) и т.д.

Пример задания CSS-перехода для изменения цвета заднего фона элемента при наведении на него курсора мыши:

.button {
    background-color: yellow;
    transition: background-color 1s ease;
}

.button:hover {
    background-color: orange;
}

Здесь при изменении состояния элемента (наведении курсора мыши на кнопку) свойство background-color будет плавно меняться с желтого на оранжевый цвет в течение одной секунды с эффектом плавности («ease»).

Можно задать несколько свойств для перехода через запятую в свойстве transition:

.button {
    background-color: yellow;
    color: black;
    transition: background-color 1s ease, color 0.5s ease;
}

.button:hover {
    background-color: orange;
    color: white;
}

Здесь при наведении на кнопку цвет фона будет меняться в течение 1 секунды, а цвет текста в течение 0.5 секунды с эффектом плавности («ease»).