animation-composition

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-composition = 
  <single-animation-composition>#  

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

В примере ниже показан эффект различных значений 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

Здесь базовое значение — translateX(50px) rotate(45deg).

@keyframes slide {
  20%,
  40% {
    transform: translateX(100px);
    background: yellow;
  }
  80%,
  100% {
    transform: translateX(150px);
    background: orange;
  }
}

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

Результат

• С replace, конечное значение эффекта для свойства transform в ключевом кадре 0%, 20% составляет translateX(100px) (полностью заменяя базовое значение translateX(30px) rotate(45deg)). В данном случае элемент вращается от 45 градусов до 0 градусов по мере анимации от значения по умолчанию, установленного для элемента, до значения без вращения, установленного в метке 0%. Это поведение по умолчанию.
• С add, конечное значение эффекта для свойства transform в ключевом кадре 0%, 20% составляет translateX(30px) rotate(45deg) и translateX(100px). Таким образом, элемент смещается 30px вправо, поворачивается на 45deg, а затем смещается ещё на 100px вдоль перенаправленной оси X.
• С accumulate, конечное значение эффекта в ключевом кадре 0%, 20% составляет translateX(130px) rotate(45deg). Это означает, что два значения смещения по оси X — 30px и 100px — объединяются или "накапливаются".

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