Урок 63 із 104
61%
← Назад

Робота з анімацією в CSS

Вивчаємо CSS-анімації за допомогою властивостей animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-fill-mode та animation-direction.

Що таке animation

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

Для створення анімації використовують правило @keyframes, у якому описують початковий та кінцевий стани або кілька проміжних станів елемента.

@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { animation-name: move; animation-duration: 2s; }

Властивість animation-name

Властивість animation-name визначає назву анімації, яку потрібно застосувати до елемента. Назва повинна збігатися з назвою, заданою в правилі @keyframes.

@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { animation-name: move; animation-duration: 2s; }

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

Властивість animation-duration визначає, скільки часу триває один цикл анімації. Значення задають у секундах (s) або мілісекундах (ms).

@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { animation-name: move; animation-duration: 2s; }

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

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

@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { animation-name: move; animation-duration: 2s; animation-delay: 1s; }

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

Властивість animation-timing-function визначає швидкість зміни властивості протягом анімації.

  • ease — анімація починається та завершується повільніше.
  • linear — анімація відбувається з однаковою швидкістю.
  • ease-in — анімація починається повільно.
  • ease-out — анімація завершується повільно.
  • ease-in-out — анімація повільна на початку та в кінці.
@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { animation-name: move; animation-duration: 2s; animation-timing-function: ease-in-out; }

Властивість animation-iteration-count

Властивість animation-iteration-count визначає, скільки разів повинна повторитися анімація.

  • 1 — анімація виконується один раз.
  • 2, 3, 4 тощо — анімація повторюється вказану кількість разів.
  • infinite — анімація повторюється нескінченно.
@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { animation-name: move; animation-duration: 2s; animation-iteration-count: infinite; }

Властивість animation-fill-mode

Властивість animation-fill-mode визначає, які стилі анімації застосовуються до елемента до її початку або після її завершення.

  • none — стилі анімації не застосовуються до або після її виконання.
  • forwards — після завершення анімації зберігається останній стан.
  • backwards — під час затримки застосовуються стилі першого ключового кадру.
  • both — поєднує поведінку forwards та backwards.
@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { animation-name: move; animation-duration: 2s; animation-fill-mode: forwards; }

Властивість animation-direction

Властивість animation-direction визначає напрямок відтворення анімації.

  • normal — кожен цикл виконується від початку до кінця.
  • reverse — кожен цикл виконується у зворотному напрямку.
  • alternate — напрямок змінюється після кожного циклу.
  • alternate-reverse — анімація починається у зворотному напрямку та змінює його після кожного циклу.
@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { animation-name: move; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: alternate; }

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

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

📌 Завдання:
  1. Створіть блок.
  2. Задайте йому початкове положення.
  3. Створіть @keyframes з назвою move.
  4. Перемістіть блок на 200px вправо.
  5. Підключіть анімацію за допомогою animation-name.
  6. Задайте тривалість анімації 2 секунди.
<!-- Початковий код --> <div class="box"></div>
💡 Показати підказку

Створіть @keyframes move, задайте animation-name: move; та animation-duration: 2s;.

✅ Показати відповідь
@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { width: 100px; height: 100px; background-color: gray; animation-name: move; animation-duration: 2s; }

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

📌 Завдання:
  1. Створіть анімацію переміщення блоку.
  2. Задайте тривалість одного циклу 2 секунди.
  3. Використайте animation-duration.
<!-- Початковий код --> <div class="box"></div>
💡 Показати підказку

Додайте animation-duration: 2s;.

✅ Показати відповідь
@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { width: 100px; height: 100px; background-color: gray; animation-name: move; animation-duration: 2s; }

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

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

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

✅ Показати відповідь
@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { width: 100px; height: 100px; background-color: gray; animation-name: move; animation-duration: 2s; animation-delay: 1s; }

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

📌 Завдання:
  1. Створіть анімацію переміщення блоку.
  2. Задайте тривалість 2 секунди.
  3. Використайте animation-timing-function: ease-in-out.
<!-- Початковий код --> <div class="box"></div>
💡 Показати підказку

Додайте animation-timing-function: ease-in-out;.

✅ Показати відповідь
@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { width: 100px; height: 100px; background-color: gray; animation-name: move; animation-duration: 2s; animation-timing-function: ease-in-out; }

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

📌 Завдання:
  1. Створіть анімацію переміщення блоку.
  2. Задайте тривалість 2 секунди.
  3. Зробіть так, щоб анімація повторилася 3 рази.
  4. Використайте animation-iteration-count.
<!-- Початковий код --> <div class="box"></div>
💡 Показати підказку

Задайте animation-iteration-count: 3;.

✅ Показати відповідь
@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { width: 100px; height: 100px; background-color: gray; animation-name: move; animation-duration: 2s; animation-iteration-count: 3; }

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

📌 Завдання:
  1. Створіть анімацію переміщення блоку.
  2. Задайте тривалість 2 секунди.
  3. Зробіть так, щоб після завершення анімації блок залишався у кінцевій позиції.
  4. Використайте animation-fill-mode.
<!-- Початковий код --> <div class="box"></div>
💡 Показати підказку

Використайте animation-fill-mode: forwards;.

✅ Показати відповідь
@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { width: 100px; height: 100px; background-color: gray; animation-name: move; animation-duration: 2s; animation-fill-mode: forwards; }

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

📌 Завдання:
  1. Створіть анімацію переміщення блоку.
  2. Задайте тривалість 1 секунду.
  3. Зробіть так, щоб блок постійно рухався вперед і назад.
  4. Використайте animation-iteration-count та animation-direction.
<!-- Початковий код --> <div class="box"></div>
💡 Показати підказку

Використайте animation-iteration-count: infinite; та animation-direction: alternate;.

✅ Показати відповідь
@keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { width: 100px; height: 100px; background-color: gray; animation-name: move; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; }

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

📌 Завдання:
  1. Створіть блок.
  2. Задайте йому початковий розмір та колір.
  3. Створіть анімацію, яка збільшує блок від scale(1) до scale(1.3).
  4. Задайте тривалість анімації 1 секунду.
  5. Зробіть анімацію нескінченною.
  6. Зробіть рух вперед і назад за допомогою animation-direction: alternate.
<!-- Початковий код --> <div class="box"></div>
💡 Показати підказку

У @keyframes використайте transform: scale(1) та transform: scale(1.3).

✅ Показати відповідь
@keyframes scaleBox { from { transform: scale(1); } to { transform: scale(1.3); } } .box { width: 100px; height: 100px; background-color: gray; transform: scale(1); animation-name: scaleBox; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; }
❗ Важливо:

CSS-анімація складається з ключових кадрів @keyframes та властивостей animation, які визначають назву, тривалість, затримку, швидкість, кількість повторень, поведінку після завершення та напрямок відтворення.