Що таке transition в CSS3?

Властивість transition у CSS використовується для створення плавних переходів між станами елемента, коли змінюється його стиль. Це робить інтерфейс більш інтерактивним і покращує користувацький досвід, додаючи анімаційні ефекти до веб-сторінки без використання JavaScript.

1. Дозволяє задавати тривалість та час зміни стилів.
2. Працює з більшістю CSS-властивостей, включаючи колір, розміри, позиціювання та прозорість.
3. Використовується разом із псевдокласами (наприклад, :hover), щоб реагувати на взаємодію користувача.

/* Базовий стиль */
button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Зміна стилю при наведенні */
button:hover {
    background-color: #2ecc71;
    transform: scale(1.1);
}

У цьому прикладі кнопка змінює колір фону та збільшується при наведенні курсора. Завдяки transition ці зміни відбуваються плавно, а не миттєво, що робить взаємодію більш приємною для користувача.

Параметри властивості transition включають:

1. transition-property — визначає, які властивості змінюватимуться (наприклад, color, transform).
2. transition-duration — задає тривалість ефекту (у секундах або мілісекундах).
3. transition-timing-function — регулює, як відбуватиметься перехід (наприклад, linear, ease, ease-in, ease-out).
4. transition-delay — додає затримку перед початком переходу.

Повний скорочений запис:

/* transition: property duration timing-function delay; */
button {
    transition: all 0.5s ease-in-out 0.1s;
}

Використання властивості transition допомагає зробити інтерфейс інтуїтивно зрозумілим та візуально привабливим. Додаючи переходи, важливо враховувати продуктивність: анімації на складних елементах можуть уповільнити завантаження сторінки, особливо на мобільних пристроях.