Css Animation
Властивість animation дозволяє анімувати елементи сторінки.
Можна керувати тривалістю анімації, повторенням, напрямком, типом руху і кроками. Анімувати можна будь-які елементи, в тому числі псевдо-елементи.
Обов'язкова умова - наявність конкретних значень. Властивості зі значенням auto НЕ анімуються.
Приклад коду анімації:
move - ім'я анімації 15s - тривалість infinite - нескінченне повторення linear - тип руху
@keyframes
Сама анімація задається всередині блоку @keyframes. Після @keyframes задається ім'я анімації, а потім всередині фігурних дужок - її кроки.
Кроки можна задавати через відсотки або за допомогою ключових слів from і to. При цьому в кроках можна змінювати тип анімації (animation-timing-function):
Animation-name
Використовується для завдання імені анімації.
Можливі значення: одне або кілька імен анімації. Значення за замовчуванням: немає.
animation-name: move; - одна анімація. animation-name: move, sun-color; - дві анімації, імена задаються через кому.
Animation-duration
Тривалістю анімації управляє властивість animation-duration.
Можливі значення: час в секундах (s) або мілісекундах (ms). У разі декількох анімацій час для кожної з них можна задати через кому. Початкове значення - 0s.
Animation-timing-function
Властивість визначає тип анімації.
Плавна анімація ease - ковзання (значення за замовчуванням) linear - рівне рух ease-in - прискорення до кінця ease-out - прискорення на початку ease-in-out - більш плавне ковзання, ніж ease
cubic-bezier (число, число, число, число) дозволяє задавати складний тип анімації. Значення зручно підбирати на cubic-bezier.com.
Покрокова анімація step-start і step-end - дозволяють задати покрокову анімацію, обов'язково ставити конкретні кроки. При цьому з step-start зміни відбуваються на початку кроку, а з step-end - в кінці.
step-end. Якщо виставити step-start. лічильник буде починатися з одиниць.
steps (число) - дозволяє задати кількість кроків, за які буде виконана анімація, при цьому можна задати тільки останній крок без необхідності вказувати проміжні.
Animation-iteration-count
Управляє повторенням анімації. Значення за замовчуванням: 1 (анімація програється один раз).
число - скільки разів програти анімацію. infinite - нескінченне повторення.
Animation-direction
Відповідає за напрямок анімації.
normal - анімація програється в звичайному напрямку, з початку і до кінця. reverse - анімація програється в зворотному напрямку, тобто з кінця. alternate - анімація програється з початку і до кінця, а потім у зворотному напрямку. alternate-reverse - анімація програється з кінця до початку, а потім у зворотному напрямку.
Animation-play-state
Управляє зупинкою і програванням анімації.
Можливі значення: running - анімація програється (значення за замовчуванням). paused - анімація застигає на першому кроці.
Управляти кроком, де буде зупинка, не виходить, але можна зупиняти анімацію по: hover:
Animation-delay
За допомогою animation-delay можна задавати затримку анімації перед початком відтворення.
Можливі значення: час в секундах (s) або мілісекундах (ms). Значення можуть бути негативними. У разі декількох анімацій час для кожної з них можна задати через кому. Початкове значення - 0s.
Animation-fill-mode
Властивість визначає чи буде анімація впливати на елемент поза часом відтворення анімації.
none - анімація впливає на елемент тільки під час відтворення, після закінчення елемент повертається в початковий стан. forwards - анімація впливає на елемент після закінчення відтворення. backwards - анімація впливає на елемент до початку відтворення. both - анімація впливає на елемент і до початку, і після закінчення відтворення.
Щоб побачити як backwards і both працюють до початку відтворення анімації, задана затримка animation-delay: 3s ;. Так само для цього має сенс відкрити приклад в новому вікні.
Всі ці властивості можна записати за допомогою короткої записи, наприклад:
Обов'язкові значення - ім'я анімації і тривалість. Перше тимчасове значення вважається тривалістю відтворення, друге - затримкою.