Анімація CSS3 для найменших
CSS3 анімація досить широко використовується. Настав час розібратися навіть початківцям сайтобудівникам що ж таке CSS анімація і як її створити. Можливо Ви думаєте, що CSS3 анімація полягає в тому, щоб змусити рухатися блоки і це схоже на мультфільм. Але CSS анімація - це не тільки переміщення елемента з однієї точки в іншу, а це ще спотворення та інші трансформації. Щоб це було зрозуміло навіть для початківців, я розписав усе по кроках.
1. Основні властивості CSS3 анімації
Невеликий теоретичний блок, з якого Ви зрозумієте, які властивості CSS3 відповідають за анімацію, а також які значення вони можуть набувати.
- animation-name - унікальне ім'я анімації (ключових кадрів, про них поговоримо трохи нижче).
- animation-duration - тривалість анімації за секунди.
- animation-timing-function - крива зміни швидкості анімації. На перший погляд, дуже незрозуміло. Завжди легше показати на прикладі, а їх Ви побачите нижче. Може приймати такі значення: linear ease ease-in ease-out cubic-bezier(n,n,n,n).
- animation-delay — затримка за секунди перед початком анімації.
- animation-iteration-count - кількість повторів анімації. Задається або просто числом, або можна вказати infinite і анімація виконуватиметься нескінченно.
Тут є лише основні властивості, яких більш ніж достатньо, щоб створити свою першу анімацію на CSS3.
Останнє, що нам потрібно знати та розуміти з теорії, — це те, як створювати ключові кадри. Це робити легко і робиться це за допомогою правила @keyframes , всередині якого вказуються ключові кадри. Синтаксис цього правила наступний:
Вище мипоставили перший та останній кадр. Усі проміжні стани розрахуються АВТОМАТИЧНО!
2. Реальний приклад анімації CSS3
Теорія як завжди нудна і який завжди зрозуміла. Набагато простіше побачити все на реальному прикладі, а найкраще зробити своїми руками на якійсь тестовій HTML сторінці.
При вивченні мови програмування зазвичай пишуть програму "Hello, world!", За якою можна зрозуміти який синтаксис у цієї мови та ще якісь базові речі. Але ми вивчаємо не мову програмування, а мову опису зовнішнього вигляду документа. Тому ми матимемо свій "Hello, world!".
Ось що ми зробимо для прикладу: нехай у нас якийсь блок
Начебто все зрозуміло — просто потрібно стиснути блок
Спочатку HTML розмітка. Вона дуже проста, тому що ми працюємо лише з одним елементом на сторінці.
А ось що знаходиться у файлі стилів:
Дивитись приклад
Як бачите, ми вказали лише перший та останній ключовий кадр, а всі проміжні "побудувалися" автоматично.
Ось і готова Ваша перша анімація CSS3. Щоб закріпити отримані знання - створіть HTML документ і CSS файл, і там вставте (а краще надрукуйте руками) код з прикладу. Тоді Ви точно все зрозумієте. Потім спробуйте зробити те саме з висотою блоку (він повинен зменшуватися по висоті), щоб закріпити матеріал.
3. Приклади анімації CSS3 складніші
Вище Ви дізналися, як легко створити CSS3 анімацію. Якщо спробували своїми руками це зробити, то вже зрозуміли весь процес і зараз хочете дізнатися як можна створити складнішу та красивішу анімацію. А її створити справді можна. Нижче є 3 уроки де анімація створюється так само, як у прикладі вище.
Перший урок із перетворення на CSS, де Ви побачите4 приклади маніпуляцій із блоком, після чого зможете застосувати це на своєму сайті.
В уроці Ви знайдете застосування анімації властивостей на реальних прикладах, які можна використовувати на сайті.
Тут Ви дізнаєтеся, як створювати більш просунуту анімацію, в якій поєднано відразу кілька перетворень.
Уроки допоможуть Вам зрозуміти анімацію CSS ще краще. Головне - це намагатися повторювати те, що Ви бачите в уроках. Або хоча б спробуйте змінювати значення властивостей і дивитися, що виходить, тоді Ви станете менше бояться CSS.
4. Для лінивих - сервіс генерації анімації
Ще раз повторю і тут: спочатку розберіться з прикладом на початку статті, щоб Ви розуміли, як будується анімація CSS3. Після чого Ви можете скористатися генератором і легко створити анімацію на власний розсуд. Я Вам рекомендую спочатку розібратися з прикладом, тому що коли Ви генератори не дозволяють створювати дуже «гнучкі» анімації, які Ви тільки забажаєте. Але якщо Ви знаєте як влаштований код, то легко зможете дописати потрібні властивості і отримати дуже крутий ефект в результаті.
Ще раз подивіться все за пунктами: