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

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

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

правити

Порада

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

автор: Svitlana правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

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

keyframename

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

автор: Svitlana

правити

none

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	43	16	9	30	12	10

Підтримка: мобільні переглядачі

Переглядач
	43	43	16	9

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box"></div>

.box {
    width: 60px;
    height: 60px;
    background: #0172ad;
    position: relative;
    animation-name: mymove;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes mymove {
    from { left: 0; }
    to   { left: 200px; }
}