css властивість animation
Універсальна властивість animation — скорочена властивість для восьми властивостей анімації:
animation-name- Встановлює одну або кілька анімацій, які застосовуються до елементу. Являє собою ім'я, пов'язане з правилом @keyframes, воно в свою чергу задає послідовність руху.animation-duration- Задає час в секундах або мілісекундах, скільки повинен тривати один цикл анімації. За замовчуванням значення дорівнює 0s, це означає, що ніякої анімації немає.animation-timing-function- Встановлює, згідно якої функції часу повинна відбуватися анімація кожного циклу між ключовими кадрами.animation-delay- Встановлює час очікування перед запуском циклу анімації.animation-iteration-count- Властивість визначає, скільки разів програвати цикл анімації до її зупинки.animation-direction- Встановлює напрямок руху анімації.animation-fill-mode- Визначає, які стилі повинні застосовуватися до елементу, коли анімація не програється.animation-play-state- Властивість визначає, програвати анімацію або поставити її на паузу.
Для створення анімації засобами CSS, використовуйте властивість animation разом з правилом @keyframes, яке встановлює візуальні ефекти для анімації.
Зверніть увагу, що порядок у визначенні властивості має дуже важливе значення. Перше значення у формі часу, розглядається як animation-duration, а друге - як animation-delay.
Порядок також важливий для визначення animation-name серед інших значень. Під час аналізування правил, ключові слова допустимі лише для властивостей відмінних від animation-name, і значення яких не було задані раніше, будуть прийняті саме для них, а не для animation-name. Крім того, мають бути задані значення без задання для всіх властивостей, щоб була можливість визначити animation-name.
| Нотатка: | Завжди вказуйте властивість |
Синтаксис
animation: animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction || animation-fill-mode || animation-play-stateВластивість animation може отримувати 10 значень:
animation-nameЗадає ім'я
@keyframesдля анімаціїanimation-durationВизначає скільки секунд або мілісекунд анімації потрібно, щоб завершити один цикл
animation-timing-functionВизначає криву (функцію) швидкості анімації
animation-delayВизначає затримку до початку анімації
animation-iteration-countВказує, скільки разів анімація повинна повторюватись
animation-directionВизначає, чи повинна анімація відтворюватися в зворотному напрямку на альтернативних циклах.
animation-fill-modeВизначає стиль для елемента, коли анімація не відтворюється (коли анімація закінчилася або має затримку)
animation-play-stateВизначає, чи буде анімація працювати або буде призупинена
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена)
| Значення без задання: | none 0s ease 0s 1 normal none running |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.animation="mymove 5s infinite" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| animation | 43.0 |
10.0 |
16.0 |
9.0 |
12.10 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| animation | 2.0 -webkit- |
16.0 |
9.2 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Приклад анімації
Простий приклад використання універсальної властивості
Приклад роботи властивості
Зв'язування анімації для елемента <div> з використанням універсальної властивості animation
div {
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}