css властивість animation-name
Властивість animation-name встановлює одну або кілька анімацій, які застосовуються до елементу. Являє собою ім'я пов'язане з правилом @keyframes, воно в свою чергу задає послідовність руху.
Ось на цьому прикладі ми бачимо два блоки. Перший анімується, бо для нього заданий 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 |
10.0 |
16.0 |
9.0 |
12.10 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| animation-name | 2.0 -webkit- |
16.0 |
9.2 |
Мобільних переглядачів ще не додано.
Приклади
На цьому прикладі ми бачимо, два елементи. Для лівого встановлено одну анімацію, для правої - дві:
Простий приклад дії властивості
Задає ім'я @keyframes для анімації
div {
-webkit-animation-name: mymove; /* Chrome, Safari, Opera */
animation-name: mymove;
}