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

1. transition-property — какие свойства анимировать

Указывает, какие свойства CSS будут участвовать в переходе.

Возможные значения:

• all — все изменяющиеся свойства (по умолчанию)
• название свойства — например, background-color, transform, opacity
• none — никакие свойства не анимируются

.button {
    transition-property: background-color, transform;
}

2. transition-duration — длительность перехода

Задаёт время, за которое произойдёт переход. Указывается в секундах (s) или миллисекундах (ms).

.button {
    transition-duration: 0.3s;  /* 300 миллисекунд */
}

3. transition-timing-function — функция ускорения

Определяет, как меняется скорость перехода во времени.

Возможные значения:

• ease — медленно в начале, быстро в середине, медленно в конце (по умолчанию)
• linear — равномерно
• ease-in — медленно в начале
• ease-out — медленно в конце
• ease-in-out — медленно в начале и в конце
• cubic-bezier() — своя кривая ускорения (можно задать точные параметры)

.button {
    transition-timing-function: ease-out;
}

4. transition-delay — задержка перед началом

Задаёт время ожидания перед началом перехода.

.button {
    transition-delay: 0.2s;  /* начнётся через 0.2 секунды */
}

5. Сокращённое свойство transition

Объединяет все свойства перехода в одной строке.

Синтаксис: transition: свойство длительность задержка функция-ускорения

.button {
    transition: background-color 0.3s ease 0.1s;
}

6. Примеры переходов

Пример 1: плавное изменение цвета фона при наведении

.btn {
    background-color: #530899;
    color: white;
    transition: background-color 0.3s ease;
}
.btn:hover {
    background-color: #14b8a6;
}

Пример 2: плавное увеличение кнопки (transform + transition)

.btn {
    transition: transform 0.2s ease;
}
.btn:hover {
    transform: scale(1.1);
}

Пример 3: несколько свойств одновременно

.btn {
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
}
.btn:hover {
    background-color: #14b8a6;
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

Пример 4: плавное появление с задержкой

.box {
    opacity: 0.3;
    transition: opacity 0.5s ease 0.2s;
}
.box:hover {
    opacity: 1;
}

7. scroll-behavior — плавная прокрутка

Определяет, как будет происходить прокрутка страницы при переходе по якорным ссылкам (например, <a href="#section">).

Возможные значения:

• auto — мгновенная прокрутка (значение по умолчанию)
• smooth — плавная прокрутка

html {
    scroll-behavior: smooth;
}