animation-composition CSS property

Syntax

/* 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;

Werte

replace

Der Effektwert überschreibt den darunterliegenden Wert der Eigenschaft. Dies ist der Standardwert.

add

Der Effektwert baut auf dem darunterliegenden Wert der Eigenschaft auf. Diese Operation erzeugt einen additiven Effekt. Bei Animationstypen, bei denen die Addition nicht kommutativ ist, erfolgt die Reihenfolge der Operanden durch den darunterliegenden Wert, gefolgt vom Effektwert.

accumulate

Die Effekt- und darunterliegenden Werte werden kombiniert. Bei Animationstypen, bei denen die Addition nicht kommutativ ist, erfolgt die Reihenfolge der Operanden durch den darunterliegenden Wert, gefolgt vom Effektwert.

Beschreibung

Jede Eigenschaft, die von der @keyframes At-Regel angesprochen wird, ist mit einem Effektstapel verbunden. Der Wert des Effektstapels wird berechnet, indem der darunterliegende Wert einer Eigenschaft in einer CSS-Stilregel mit dem Effektwert dieser Eigenschaft im Keyframe kombiniert wird. Die Eigenschaft animation-composition hilft, festzulegen, wie der darunterliegende Wert mit dem Effektwert kombiniert werden soll.

Zum Beispiel, im untenstehenden CSS ist blur(5px) der darunterliegende Wert und blur(10px) der Effektwert. Die animation-composition-Eigenschaft gibt an, welche Operation ausgeführt werden soll, um den endgültigen Effektwert nach der Zusammensetzung des darunterliegenden Werts und des Effektwerts zu erhalten.

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

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

Betrachten Sie verschiedene Werte für die animation-composition-Eigenschaft im obigen Beispiel. Der endgültige Effektwert in jedem dieser Fälle wird wie unten erklärt berechnet:

• Mit replace wird blur(10px) blur(5px) im 0%-Keyframe ersetzen. Dies ist das Standardverhalten der Eigenschaft.
• Mit add wird der zusammengesetzte Effektwert im 0%-Keyframe blur(5px) blur(10px) sein.
• Mit accumulate wird der zusammengesetzte Effektwert im 0%-Keyframe blur(15px) sein.

Formale Definition

Formale Syntax

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

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

Beispiele

Verständnis der Werte von animation-composition

Das untenstehende Beispiel zeigt den Effekt unterschiedlicher animation-composition-Werte nebeneinander.

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

Hier ist der darunterliegende Wert translateX(50px) rotate(45deg).

.container {
  width: 230px;
  height: 200px;
  background: cyan;
  display: inline-block;
  text-align: center;
}

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

@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;
}

Ergebnis

• Mit replace ist der endgültige Effektwert für die Eigenschaft transform im 20%, 40%-Keyframe translateX(100px) (es ersetzt vollständig den darunterliegenden Wert translateX(30px) rotate(45deg)). In diesem Fall dreht das Element von 45 Grad auf 0 Grad, während es von dem auf das Element selbst gesetzten Standardwert zu dem bei 20% gesetzten nicht rotierenden Wert animiert. Dies ist das Standardverhalten.
• Mit add ist der endgültige Effektwert für die Eigenschaft transform im 20%, 40%-Keyframe translateX(30px) rotate(45deg) translateX(100px). Das Element wird zuerst um 100px nach rechts verschoben, dreht sich um 45 Grad um den Ursprung und bewegt sich dann um 30px nach rechts.
• Mit accumulate ist der endgültige Effektwert im 20%, 40%-Keyframe translateX(130px) rotate(45deg). Das bedeutet, dass die beiden X-Achsen-Translationswerte von 30px und 100px kombiniert oder "akkumuliert" werden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von CSS-Animationen
• Zusammengesetzte Eigenschaft von KeyFrameEffect
• Andere verwandte Animationseigenschaften: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timeline, animation-timing-function