css властивість animation-name


Властивість animation-name встановлює одну або кілька анімацій, які застосовуються до елементу. Являє собою ім'я пов'язане з правилом @keyframes, воно в свою чергу задає послідовність руху.

Ось на цьому прикладі ми бачимо два блоки. Перший анімується, бо для нього заданий animation-name, другий - не анімується, бо animation-name не заданий, хоча всі інші властивості ідентичні:

Властивість `animation-name`

Порада:

Рекомендується використовувати універсальну властивість animation, щоб задавати всі властивості відразу в одному місці. Це робить стилі більш зрозумілішими та зменшує їхній обсяг.

Нотатка:

Порядок у animation також важливий для визначення animation-name серед інших значень. Під час аналізування правил, ключові слова допустимі лише для властивостей відмінних від animation-name, і значення яких не було задані раніше, будуть прийняті саме для них, а не для animation-name. Крім того, мають бути задані значення без задання для всіх властивостей, щоб була можливість визначити animation-name.

Синтаксис

animation-name: keyframename|none|initial|inherit;

Властивість animation-name може отримувати 4 значення:

keyframename

Текстовий рядок, який пов'язаний з анімацією. Ідентифікатор повинен починатися з літери або підкреслення (_), також може містити цифри від 0 до 9 і дефіс (-). Заборонено використовувати зарезервовані ключові слова none, unset, inherit, initial

none

Вимикає анімацію

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена)

Значення без задання: none
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.animationName="myNEWmove"

Переглядачі

Переглядач
animation-name

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-name

2.0 -webkit-

16.0
5.0 -moz-

9.2
4.0 -webkit-


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

Приклади


На цьому прикладі ми бачимо, два елементи. Для лівого встановлено одну анімацію, для правої - дві:

Простий приклад дії властивості

Задає ім'я @keyframes для анімації

div {


  -webkit-animation-name: mymove; /* Chrome, Safari, Opera */ 


  animation-name: mymove; 


}

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