animation-composition

replace

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

add

Der Effektwert baut auf dem zugrunde liegenden Wert der Eigenschaft auf. Diese Operation erzeugt einen additiven Effekt. Bei Animationstypen, bei denen die Additionsoperation nicht kommutativ ist, ist die Reihenfolge der Operanden der zugrunde liegende Wert gefolgt vom Effektwert.

accumulate

Die Effekt- und zugrunde liegenden Werte werden kombiniert. Bei Animationstypen, bei denen die Additionsoperation nicht kommutativ ist, ist die Reihenfolge der Operanden der zugrunde liegende Wert gefolgt vom Effektwert.

Jede Eigenschaft, die durch die @keyframes At-Regel anvisiert wird, ist mit einem Effektstapel verbunden. Der Wert des Effektstapels wird berechnet, indem der zugrunde liegende Wert einer Eigenschaft in einer CSS-Stilregel mit dem Effektwert dieser Eigenschaft im Keyframe kombiniert wird. Die animation-composition Eigenschaft hilft dabei festzulegen, wie der zugrunde liegende Wert mit dem Effektwert kombiniert wird.

Zum Beispiel, im untenstehenden CSS ist blur(5px) der zugrunde liegende Wert, und blur(10px) ist der Effektwert. Die animation-composition Eigenschaft gibt die Operation an, die ausgeführt werden soll, um den endgültigen Effektwert nach der Komposition des Effekts des zugrunde liegenden Wertes und des Effektwertes zu erzeugen.

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

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

Berücksichtigen 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.

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

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

Das untenstehende Beispiel zeigt den Effekt verschiedener 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 zugrunde liegende 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 transform Eigenschaft im 0%, 20% Keyframe translateX(100px) (vollständiges Ersetzen des zugrunde liegenden Werts translateX(30px) rotate(45deg)). In diesem Fall dreht sich das Element von 45 Grad auf 0 Grad, während es von dem auf dem Element selbst gesetzten Standardwert zum nicht-gedrehten Wert am 0%-Markierungspunkt animiert. Dies ist das Standardverhalten.
• Mit add ist der endgültige Effektwert für die transform Eigenschaft im 0%, 20% Keyframe translateX(30px) rotate(45deg) gefolgt von translateX(100px). Das Element wird also 30px nach rechts verschoben, um 45deg gedreht und dann weiter um 100px entlang der umgelenkten X-Achse übersetzt.
• Mit accumulate ist der endgültige Effektwert im 0%, 20% Keyframe translateX(130px) rotate(45deg). Das bedeutet, dass die beiden X-Achse-Translationswerte von 30px und 100px kombiniert oder "akkumuliert" werden.

• 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