Ось урок, створений спеціально за твоїм запитом, у стилі CS50 — енергійно, з прикладами та фокусом на розумінні суті.

🎓 CS50-Style: Магія живого інтерфейсу (Transitions & Hover)

Вітаю, друзі!

Уявіть, що ви заходите в кімнату і натискаєте вимикач світла. КЛАЦ! Світло з’являється миттєво. Це функціонально? Так. Це приємно? Ну, це просто факт.

А тепер уявіть, що ви в кінотеатрі. Світло не зникає різко, воно повільно тьмяніє. Це створює атмосферу, це дає вашим очам час адаптуватися, це виглядає дорого і професійно.

Проблема: Більшість веб-сторінок новачків схожі на той старий вимикач. Ви наводите мишку на кнопку — вона різко стає червоною. Прибираєте — різко синьою. Це виглядає "дешево" і неприродно, бо в реальному світі (фізиці) нічого не відбувається за 0 секунд.

Сьогодні ми навчимося перетворювати "КЛАЦ" на плавну магію. Ми поговоримо про Hover-ефекти та Transitions (плавні переходи). Без цього ваші сайти завжди виглядатимуть як чернетки.

Готові додати життя у ваш код? Поїхали!

2. 🧠 Теоретична база: Як це працює "під капотом"

Перш ніж писати код, зрозуміймо логіку. Браузер — це дуже швидкий художник.

Коли ви змінюєте колір кнопки при наведенні миші, браузер має два стани: 1. Стан А (Спокій): Кнопка синя. 2. Стан Б (Наведення / Hover): Кнопка червона.

Без transition браузер просто перемикає кадр. Було сиє — стало червоне. З transition браузер каже: "Окей, у мене є 0.5 секунди. Я маю поступово змішувати синій з червоним, щоб дійти до фінішу вчасно". Він малює проміжні кадри за вас.

🔑 Ключові поняття (запам'ятайте це):

:hover (Псевдоклас): Це тригер. "Коли користувач навів мишку". Це наш перемикач.
transition (Властивість): Це інструкція для браузера, як саме змінювати стилі.

Синтаксис виглядає так (інтуїтивно): transition: [що змінюємо] [як довго] [яким чином];

Що треба зрозуміти інтуїтивно: Ви не анімуєте об'єкт постійно. Ви просто кажете браузеру: "Якщо цей параметр зміниться (неважливо чому), не роби це різко, зроби це плавно".

3. 🧪 Приклади: Від простого до професійного

Приклад 1: Кнопка-світлофор (Мінімальний)

Давайте зробимо кнопку, яка змінює колір.

❓ Питання до вас: Де ми маємо написати transition? У звичайному стані кнопки чи всередині :hover? (Подумайте секунду...).

Дивимось код:

/* Початковий стан */
.btn {
    background-color: blue;
    color: white;
    padding: 10px 20px;

    /* МАГІЯ ТУТ 👇 */
    /* Змінюй background-color протягом 0.3 секунд */
    transition: background-color 0.3s; 
}

/* Стан при наведенні */
.btn:hover {
    background-color: red;
}

Чому так? Ми ставимо transition у .btn, а не в .btn:hover. * Якщо поставити в .btn, перехід працює і коли ми наводимо (Blue -> Red), і коли прибираємо мишку (Red -> Blue). * Якщо поставити тільки в :hover, то при наведенні буде плавно, а коли приберете мишку — колір різко "відвалиться" назад.

Приклад 2: Картка товару (Реальний кейс)

Уявіть картку товару в інтернет-магазині. Коли ми наводимо на неї, вона має трохи "спливати" вгору і відкидати тінь. Це дає відчуття тактильності.

<div class="card">Купи мене!</div>

.card {
    width: 200px;
    height: 300px;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

    /* Ми хочемо анімувати ВСЕ, що зміниться */
    transition: all 0.3s ease-in-out;
}

.card:hover {
    /* Піднімаємо картку на 10 пікселів вгору */
    transform: translateY(-10px);

    /* Робимо тінь глибшою */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

Що тут відбувається? Ми використали transform. Чому не змінили margin-top? Тому що transform — це дешево для браузера (працює відеокарта). А зміна відступів (margin) змушує процесор перераховувати положення всіх сусідніх елементів. Думайте про продуктивність!

4. 🛠 Практична частина (Hands-on)

Тепер ваша черга. Відкрийте редактор коду (VS Code, Codepen).

Завдання 1: "База" Створіть квадрат 100x100px. Зробіть так, щоб при наведенні він ставав колом (border-radius: 50%) і міняв колір. Час переходу — 1 секунда.

Завдання 2: "Помилка новачка" Візьміть код із Завдання 1. Перенесіть властивість transition із основного класу в :hover. * Наведіть мишку. (Плавно?) * Приберіть мишку. (Різко?) * Висновок: Поверніть як було.

Завдання 3: "Швидкість" Додайте третій параметр у transition: transition: all 0.5s ease-back; (спробуйте різні варіанти: linear, ease-in, steps(5)). Як змінюється "характер" руху?

Завдання 4: "Примарна кнопка" (Ghost Button) Зробіть кнопку з прозорим фоном і кольоровою рамкою. При наведенні: 1. Фон заливається кольором рамки. 2. Текст стає білим. Все це має відбуватися синхронно і плавно.

Міні-кейс: "А що, якщо..." А що, якщо ми хочемо змінити колір за 0.2с, а форму — за 2с? Підказка: transition може приймати кілька значень через кому: transition: background 0.2s, border-radius 2s;. Спробуйте!

5. 💡 Мислення як у розробника

Як відрізнити код джуніора від коду профі в цій темі?

Не анімуйте display: none! Це класична пастка. Ви не можете плавно перейти від "об'єкта не існує" до "об'єкт є".
- Як думає профі: "Мені треба сховати елемент плавно? Я використаю opacity: 0 та visibility: hidden".
Обережніше з transition: all Спочатку це зручно. Але якщо ви випадково зміните 10 властивостей, браузер спробує анімувати їх усі. Це може викликати "гальма" на слабких телефонах. Краще вказувати конкретно: transition: background-color 0.3s, transform 0.3s.
UX (User Experience) — це головне. Не робіть анімації довшими за 0.3–0.5 секунди для кнопок. Користувач прийшов купити товар, а не дивитися 2 секунди, як гарно переливається кнопка. Анімація має допомагати, а не дратувати.

6. 🧩 Підсумок

Отже, що ми сьогодні зробили? Ми взяли статичний, нудний HTML і навчили його реагувати на дії користувача.

Ви знаєте, що таке :hover (тригер).
Ви знаєте, що таке transition (згладжування).
Ви знаєте, що transition живе в батьківському елементі, а не в :hover.

Тепер ваші інтерфейси відчуваються живими, як хороша механіка, а не як зламаний світлофор.

Тизер наступної теми: Зараз наші анімації працюють тільки тоді, коли ми чіпаємо елемент мишкою. А що, якщо ми хочемо, щоб елемент рухався сам по собі? Блимав, крутився або виїжджав на екран при завантаженні сайту без нашої допомоги? Наступного разу ми поговоримо про Keyframes та Animation — повний контроль над часом!

А поки що — практикуйтесь і робіть красиво! 🚀