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-duration (тривалість анімації), в іншому випадку тривалість дорівнює 0, і тому анімація не буде відтворюватися.

Синтаксис

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
3.0 -webkit-

10.0

16.0
5.0 -moz-

9.0
4.0 -webkit-

12.10
12.0 -o-

12.0

Переглядач
animation

2.0 -webkit-

16.0
5.0 -moz-

9.2
4.0 -webkit-


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

Приклад анімації

Простий приклад використання універсальної властивості

Приклад роботи властивості

Зв'язування анімації для елемента <div> з використанням універсальної властивості animation

div {


    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */


    animation: mymove 5s infinite;


}

Додаткові посилання