CSS animation-name — ім'я анімації з @keyframes

Властивість 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; }
}

<div class="wrapper">
  <div class="block block-1">
    <span>animation-name: animate;</span>
  </div>
  <div class="block block-2">
    <span><s>animation-name</s></span>
  </div>
</div>

body {
  padding: 36px;
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  color: #222;
  line-height: 1.45; 
}

#btn {
  cursor: pointer;
  width: 250px;
  text-align: center;
  padding: 6px 12px;
  font-size: 19px;
  display: inline-block;
}

@keyframes animate {
  
  from { 
    margin-top: 0; 
  }
  
  to   { 
    margin-top: 100px; 
  }
  
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.block {
  background-color: red;
  padding: 26px 8px;
  width: 175px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  border: 2px solid rgba(255, 255, 255, .45);
  
  animation-duration: 1.25s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-direction: alternate;
}

.block-1 {
  animation-name: animate;
}

<div class="wrapper">
  <p class="block block-1"><code>одна анімація</code></p>
</div>

<div class="wrapper">
  <p class="block block-2"><code>дві анімації одночасно</code></p>
</div>

body {
  line-height: 1.45;
  font-family: Ubuntu, sans-serif;
  font-size: 17px;
  color: #252525;
}

.wrapper {
  width: 45%;
  display: inline-block;
}

.block {
  padding: 16px; 
  text-align: center;
  animation-duration: 1.75s;
  animation-timing-function: linear;
  animation-delay: 2.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: both; 
}

.block..block-1 {
  animation-name: jump;
}

.block.block-2 {
  animation-name: jump, color;
}

@keyframes jump {
  from {
    margin-top: 0;
  }
  to {
    margin-top: 35%;
  }
}

@keyframes color {
  from {
    background-color: #666;
    color: #f1f1f1;
  }
  to {
    background-color: #808080;
    color: #252525;
  }
}