Свойство CSS `animation-composition`

Свойство animation-composition CSS задаёт операцию композитинга, которая используется, когда несколько анимаций одновременно воздействуют на одно и то же свойство.

Синтаксис

/* Single animation */
animation-composition: replace;
animation-composition: add;
animation-composition: accumulate;

/* Multiple animations */
animation-composition: replace, add;
animation-composition: add, accumulate;
animation-composition: replace, add, accumulate;

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

Значения

Для этого свойства задаётся одно или несколько значений-ключевых слов, разделённых запятыми:

replace

Значение эффекта заменяет базовое значение свойства. Это значение по умолчанию.

add

Значение эффекта дополняет базовое значение свойства. Эта операция даёт аддитивный эффект. Для типов анимации, в которых операция сложения не является коммутативной, сначала используется базовое значение, а затем значение эффекта.

accumulate

Значение эффекта объединяется с базовым значением. Для типов анимации, в которых операция сложения не является коммутативной, сначала используется базовое значение, а затем значение эффекта.

Описание

Каждое свойство, на которое нацелено правило @keyframes, связано со стеком эффектов. Значение стека эффектов вычисляется путём объединения базового значения свойства в правиле стилей CSS со значением эффекта этого свойства в ключевом кадре. Свойство animation-composition позволяет задать способ объединения базового значения со значением эффекта.

Например, в приведённом ниже CSS blur(5px) — это базовое значение, а blur(10px) — значение эффекта. Свойство animation-composition задаёт операцию, выполняемую для получения итогового значения эффекта после композитинга эффекта базового значения и значения эффекта.

.icon:hover {
  filter: blur(5px);
  animation: 3s infinite pulse;
  animation-composition: add;
}

@keyframes pulse {
  0% {
    filter: blur(10px);
  }
  100% {
    filter: blur(20px);
  }
}

Рассмотрим различные значения свойства animation-composition в приведённом выше примере. Итоговое значение эффекта в каждом случае вычисляется описанным ниже образом:

• При значении replace blur(10px) заменит blur(5px) в ключевом кадре 0%. Это поведение свойства по умолчанию.
• При значении add итоговое значение эффекта в ключевом кадре 0% будет blur(5px) blur(10px).
• При значении accumulate итоговое значение эффекта в ключевом кадре 0% будет blur(15px).

Несколько значений

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

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

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

animation-composition = 
  <single-animation-composition>#

<single-animation-composition> = 
  replace |
  add |
  accumulate

Примеры

Разбираемся со значениями animation-composition

В приведённом ниже примере рядом показан эффект различных значений animation-composition.

HTML

<div class="container">
  replace
  <div id="replace" class="target"></div>
</div>
<div class="container">
  add
  <div id="add" class="target"></div>
</div>
<div class="container">
  accumulate
  <div id="accumulate" class="target"></div>
</div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.container {
  flex: 1;
  min-width: 200px;
  height: 200px;
  background: lightblue;
  display: inline-block;
  text-align: center;
}

.target {
  width: 20px;
  height: 50px;
  background: green;
  border-radius: 10px;
  margin: 20px 0;
}

@keyframes slide {
  50% {
    transform: translateY(30px);
  }
  100% {
    transform: translateX(150px);
  }
}

.target {
  transform: translateX(30px) rotate(45deg);
  animation: slide 5s linear infinite;
}
#replace {
  animation-composition: replace;
}
#add {
  animation-composition: add;
}
#accumulate {
  animation-composition: accumulate;
}

Результат

Во всех случаях базовое значение свойства transform — translateX(30px) rotate(45deg). Эффекты различных значений animation-composition:

• При значении replace свойство transform в каждом ключевом кадре полностью заменяет базовое свойство transform, заданное для анимируемого элемента. Итоговое значение эффекта для свойства transform в ключевом кадре 50% — translateY(30px) (без rotate или translateX); в ключевом кадре 100% оно равно translateX(150px) (без rotate или translateY).

  Элемент начинает с transform: translateX(30px) rotate(45deg) и фактически анимируется до transform: translateY(30px), а затем до transform: translateX(150px).

• При значении add итоговое значение эффекта в каждом ключевом кадре — это базовое значение transform, за которым непосредственно следует значение эффекта.

  Поэтому элемент начинает с transform: translateX(30px) rotate(45deg) и фактически сначала анимируется до transform: translateX(30px) rotate(45deg) translateY(30px) (то есть на 30px «вниз» по повёрнутой оси Y), а затем до transform: translateX(30px) rotate(45deg) translateX(150px). Поскольку аддитивная операция выполняется относительно базового transform, а не предыдущего ключевого кадра, в translateY(30px) нет 100%, и элемент оказывается на 150px вдоль повёрнутой оси X относительно исходного положения.

• При значении accumulate итоговое значение эффекта — это значение эффекта transform из ключевого кадра, объединённое с исходным базовым значением. В 50% значение translateY(30px) объединяется с исходным translateX(30px) в одно смещение (translate(30px, 30px)). В 100% значение translateX(150px) объединяется с исходным translateX(30px), образуя translateX(180px).

  Поэтому элемент начинает с transform: translateX(30px) rotate(45deg) и фактически сначала анимируется до transform: translate(30px, 30px) rotate(45deg), а затем до transform: translateX(180px) rotate(45deg).

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

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

См. также

• Использование CSS-анимаций
• Свойство composite объекта KeyFrameEffect
• Другие связанные свойства анимации: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timeline, animation-timing-function