animation-name

Baseline Широко доступно

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2015 года.

Свойство animation-name CSS задаёт имена одного или нескольких правил @keyframes, описывающие анимацию, применяемую к элементу. Несколько правил @keyframe задаются в виде перечисления имён через запятую. Если указанное имя не соответствует ни одному из правил @keyframe , свойства не будут анимированы.

Попробовать

Часто удобно использовать сокращённое свойство animation для одновременной установки всех свойств анимации.

Синтаксис

/* Single animation */
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

/* Multiple animations */
animation-name: test1, animation4;
animation-name:
  none,
  -moz-specific,
  sliding;

/* Global values */
animation-name: inherit;
animation-name: initial;
animation-name: revert;
animation-name: revert-layer;
animation-name: unset;

Значения

none: Специальное ключевое слово, обозначающее отсутствие ключевых кадров. Оно может быть использовано для отключения анимации без изменения порядка других идентификаторов или для отключения анимаций, полученных из каскада.
<custom-ident>: Имя, идентифицирующее анимацию. Этот идентификатор состоит из комбинации регистрозависимых букв a до z, цифр 0 до 9, символов подчеркивания (_) и/или дефисов (-). Первый символ, отличный от дефиса, должен быть буквой. Кроме того, два дефиса запрещены в начале идентификатора. Кроме того, идентификатор не может быть none, unset, initial, или inherit.

Примечание: При указании нескольких значений, разделённых запятыми, для свойства animation-*, они применяются к анимациям в том порядке, в котором появляются animation-name. Для ситуаций, когда количество анимаций и значений свойства animation-* не совпадают, см. Установку нескольких значений свойства анимации.

Формальное определение

Начальное значение	`none`
Применяется к	всем элементам, `::before` и `::after` псевдоэлементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	Не анимируемо

Формальный синтаксис

animation-name = 
  [ none | <keyframes-name> ]#  

<keyframes-name> = 
  <custom-ident>  |
  <string>

Примеры

Наименование анимации

У этой анимации есть animation-name rotate.

HTML

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

CSS

.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Результат

Наведите курсор на прямоугольник, чтобы запустить анимацию.

Примеры см. в CSS анимации.

Спецификации

Спецификация
CSS Animations Level 1 # animation-name

Совместимость с браузерами

	Десктопные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`animation-name`	433	1212	16495	301512.1–1512–15	94	4318	16495	301412.1–1412–14	93.2	4.01.0	434.4
`none`	3	12	5	15	4	18	5	14	3.2	1.0	4.4

См. также

Использование CSS анимаций
JavaScript AnimationEvent API
Другие связанные свойства анимации: animation, animation-composition, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-play-state, animation-timeline, animation-timing-function

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name