Для початку почнемо з двох стандартних понять CSS3 анімації:
1. CSS Keyframes
Використовуючи правило CSS Keyframes, Ви можете задати порядок і стиль CSS анімації. Ключові кадри - основа анімації в CSS. Вони визначають вид CSS анімації на кожному етапі тимчасової шкали анімації. Записуються як @keyframes. у кожного ключового кадру є такі компоненти:
- Ім'я. ім'я анімації, записується відразу після ключового слова @keyframes.
- Етап. етап анімації може бути вказаний як процентного співвідношення. Від 0% (початкова стадія) до 100% (кінцева стадія), ви можете задати будь-який етап і проміжні стадії на свій розсуд.>
- CSS Стилі. Ви можете використовувати будь-які CSS властивості на кожному етапі анімації, записуючи їх в фігурних дужках.
2. Властивості CSS анімації:
Після того, як ви задали всі етапи і стилі CSS анімації, Ви повинні визначити, як повинна вести себе анімація. Властивість CSS Animation використовується для виклику селектора @keyframes. Для чого використовувати правило Animation:
- Присвоєння селектора @keyframes для елементів, які Ви хочете анімувати.
- Визначити поведінку CSS анімації
Є безліч властивостей CSS анімації, два найважливіших з них:
- animation-name. Також як визначаєте ім'я в @keyframes.
- animation-duration. Визначає тривалість CSS анімації.
Розглянемо ще кілька корисних властивостей CSS анімації.
- animation-timing-function. Визначення швидкості CSS анімації. Ви можете задати будь-яку з існуючих швидкостей: linear, ease, ease-in, ease-out і ease-in-out. Також ви можете задати свою швидкість, яка буде використовувати кубічну криву Безьє.
Синтаксис: animation-timing-function: ease-in; - animation-delay. Установка затримки CSS анімації. Ви можете визначити позитивне, чи негативне значення затримки. Позитивне значення затримки, скажімо, 3s, вкаже, що наступна CSS анімація почнеться через 3s, в той час як від'ємне значення показує, що CSS анімація почнеться миттєво, але не з самого початку а в момент анімації 3s.
Синтаксис: animation-delay: 3s; - animation-iteration-count. Визначає скільки разів буде програватися анімаційний цикл, перед тим як зупинитися
Синтаксис: animation-iteration-count: 3; .
Може приймати наступні значення:- #: Ціле число.
- infinite: Нескінченне програвання CSS анімації.
- initial: Значення за замовчуванням.
- inherit: Установка значення батьківського елемента.
- animation-direction. Напрямок CSS анімації. Може приймати значення normal, reverse і alternate.
Синтаксис: animation-direction. alternate;- normal: Відтворення вперед.
- reverse: Відтворення у зворотний бік.
- alternate: Різні напрямки програвання (вперед, назад і т.д.).
- animation-fill-mode. За допомогою даного властивості, ви можете вказати які стилі застосовуватимуться після закінчення CSS анімації.
Синтаксис: animation-fill-mode: both;
Ви можете вибрати один з наступних стилів:- backwards: Початковий ключовий кадр CSS анімації буде відображатися протягом усього часу затримки анімації (має сенс застосовувати тільки до анімацій з ненульовий затримкою).
- forwards: Ефект від CSS анімації буде видно навіть тоді, коли анімація закінчилася (після завершення анімації елемент одержує не початкові значення, а якісь проміжні з анімації).
- both: Початковий ключовий кадр CSS анімації буде відображатися протягом усього часу затримки анімації, а останній буде відображатися навіть тоді, коли анімація закінчилася (має сенс застосовувати тільки до анімацій з ненульовий затримкою).
- none: Ефект від CSS анімації буде спостерігатися лише протягом часу анімації.
- animation-play-state. Визначає, чи працює CSS анімація або стоїть на паузі.
Синтаксис: animation-play-state: paused;
Можна вказати кілька значень через кому:- playing: Анімація працює.
- paused: Анімація стоїть на паузі.
Давайте створимо миготливий ефект, використовуючи вищевказані властивості:
Вийшов ефект миготіння, який має затримку в 1 секунду, загальна тривалість CSS анімації становить 6 секунд. Анімація працює в нескінченному циклі і її напрямок чергуються.
Додавання кількох CSS анімацій
Ви також можете додати відразу кілька анімацій, розділяючи їх комами: