Урок 62 із 104
60%
← Назад

Плавні переходи в CSS

Вивчаємо CSS-переходи за допомогою властивостей transition-property, transition-duration, transition-timing-function, transition-delay та скороченої властивості transition.

Що таке transition

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

Переходи часто використовують разом із псевдокласом :hover, але вони можуть працювати і під час зміни інших станів елемента.

Властивість transition-property

Властивість transition-property визначає, які саме CSS-властивості повинні змінюватися плавно.

.button { background-color: gray; transition-property: background-color; } .button:hover { background-color: blue; }

Властивість transition-duration

Властивість transition-duration визначає тривалість переходу. Значення можна задавати в секундах (s) або мілісекундах (ms).

.button { background-color: gray; transition-property: background-color; transition-duration: 1s; } .button:hover { background-color: blue; }

Властивість transition-timing-function

Властивість transition-timing-function визначає швидкість зміни властивості протягом переходу.

  • ease — початок і завершення переходу повільніші, а середина швидша.
  • linear — зміна відбувається з однаковою швидкістю.
  • ease-in — перехід починається повільно.
  • ease-out — перехід завершується повільно.
  • ease-in-out — перехід повільний на початку та в кінці.
.button { background-color: gray; transition-property: background-color; transition-duration: 1s; transition-timing-function: ease-in-out; } .button:hover { background-color: blue; }

Властивість transition-delay

Властивість transition-delay визначає затримку перед початком переходу.

.button { background-color: gray; transition-property: background-color; transition-duration: 1s; transition-delay: 0.5s; } .button:hover { background-color: blue; }

Скорочена властивість transition

Властивість transition дозволяє записати основні параметри переходу в одному рядку.

.button { background-color: gray; transition: background-color 1s ease-in-out 0.5s; } .button:hover { background-color: blue; }

У такому записі після назви властивості вказується тривалість, функція швидкості та затримка.

Плавна зміна кількох властивостей

За допомогою transition можна одночасно анімувати кілька CSS-властивостей. Для цього назви властивостей можна перелічити через кому.

.button { background-color: gray; opacity: 1; transform: scale(1); transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease; } .button:hover { background-color: blue; transform: scale(1.1); opacity: 0.8; }
❗ Важливо:

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

Практичне завдання

Практичне завдання 1

📌 Завдання:
  1. Створіть кнопку.
  2. Задайте їй початковий колір фону.
  3. При наведенні курсора змініть колір фону.
  4. Використайте transition-property для плавної зміни background-color.
<!-- Початковий код --> <button class="button">Наведіть курсор</button>
💡 Показати підказку

Задайте початковий background-color, додайте transition-property: background-color; та змініть background-color у стані :hover.

✅ Показати відповідь
.button { background-color: gray; transition-property: background-color; } .button:hover { background-color: blue; }

Практичне завдання 2

📌 Завдання:
  1. Створіть кнопку.
  2. Задайте початковий колір фону.
  3. Зробіть плавну зміну кольору тривалістю 1 секунду.
  4. При наведенні змінюйте колір фону.
  5. Використайте transition-duration.
<!-- Початковий код --> <button class="button">Наведіть курсор</button>
💡 Показати підказку

Задайте transition-duration: 1s;.

✅ Показати відповідь
.button { background-color: gray; transition-property: background-color; transition-duration: 1s; } .button:hover { background-color: blue; }

Практичне завдання 3

📌 Завдання:
  1. Створіть кнопку.
  2. Задайте початковий колір фону.
  3. Задайте тривалість переходу 1 секунду.
  4. Використайте timing-function ease-in-out.
  5. При наведенні змінюйте колір кнопки.
<!-- Початковий код --> <button class="button">Наведіть курсор</button>
💡 Показати підказку

Використайте transition-timing-function: ease-in-out;.

✅ Показати відповідь
.button { background-color: gray; transition-property: background-color; transition-duration: 1s; transition-timing-function: ease-in-out; } .button:hover { background-color: blue; }

Практичне завдання 4

📌 Завдання:
  1. Створіть кнопку.
  2. Задайте початковий колір фону.
  3. Задайте плавну зміну кольору тривалістю 1 секунду.
  4. Додайте затримку перед початком переходу 0.5 секунди.
<!-- Початковий код --> <button class="button">Наведіть курсор</button>
💡 Показати підказку

Використайте transition-delay: 0.5s;.

✅ Показати відповідь
.button { background-color: gray; transition-property: background-color; transition-duration: 1s; transition-delay: 0.5s; } .button:hover { background-color: blue; }

Практичне завдання 5

📌 Завдання:
  1. Створіть кнопку.
  2. Задайте початковий колір фону.
  3. Зробіть плавну зміну кольору за допомогою скороченої властивості transition.
  4. Задайте тривалість переходу 0.5 секунди.
  5. Використайте функцію ease-in-out.
<!-- Початковий код --> <button class="button">Наведіть курсор</button>
💡 Показати підказку

Синтаксис: transition: властивість тривалість timing-function.

✅ Показати відповідь
.button { background-color: gray; transition: background-color 0.5s ease-in-out; } .button:hover { background-color: blue; }

Практичне завдання 6

📌 Завдання:
  1. Створіть блок.
  2. Задайте початковий стан transform: scale(1).
  3. При наведенні збільшуйте його за допомогою transform: scale().
  4. Зробіть зміну розміру плавною протягом 0.3 секунди.
<!-- Початковий код --> <div class="box"></div>
💡 Показати підказку

Задайте transform: scale(1); у початковому стані, додайте transition для transform, а в :hover використайте transform: scale(1.2).

✅ Показати відповідь
.box { width: 100px; height: 100px; background-color: gray; transform: scale(1); transition: transform 0.3s ease; } .box:hover { transform: scale(1.2); }

Практичне завдання 7

📌 Завдання:
  1. Створіть кнопку.
  2. Задайте початковий колір та прозорість.
  3. При наведенні одночасно змінюйте її колір та прозорість.
  4. Для кожної властивості задайте власну тривалість переходу.
<!-- Початковий код --> <button class="button">Наведіть курсор</button>
💡 Показати підказку

Використайте кілька переходів, розділивши їх комами.

✅ Показати відповідь
.button { background-color: gray; opacity: 1; transition: background-color 0.3s ease, opacity 0.5s ease; } .button:hover { background-color: blue; opacity: 0.7; }

Практичне завдання 8

📌 Завдання:
  1. Створіть кнопку.
  2. Задайте початкові значення кольору, прозорості та transform.
  3. При наведенні змінюйте її колір, прозорість та розмір.
  4. Для всіх змін використайте скорочену властивість transition.
  5. Задайте тривалість переходів 0.3 секунди.
<!-- Початковий код --> <button class="button">Наведіть курсор</button>
💡 Показати підказку

Використайте кілька властивостей у transition через кому: background-color, opacity та transform.

✅ Показати відповідь
.button { background-color: gray; opacity: 1; transform: scale(1); transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease; } .button:hover { background-color: blue; opacity: 0.8; transform: scale(1.1); }