Wie kann ich benutzerdefinierte CSS-Eigenschaften animieren, um mehrere Elemente nacheinander anzuzeigen/auszublenden?

Animieren von benutzerdefinierten CSS-Eigenschaften/-Variablen

Problem:

Das Animieren mehrerer Elemente mit benutzerdefinierten CSS-Eigenschaften (Variablen) ist nicht möglich. Es funktioniert nicht wie erwartet. Das gewünschte Ergebnis besteht darin, dass innere Divs nacheinander erscheinen und verschwinden, wobei eine Variable zur Steuerung der Deckkraft verwendet wird.

Lösung:

CSS-Eigenschaften mit benutzerdefinierten Typen:

Führen Sie mit @property einen benutzerdefinierten Typ für die Variable ein, der es dem Browser ermöglicht, den Datentyp der Variablen zu verstehen und schrittweise Animation aktivieren:

@property --opacity {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

Animation mit benutzerdefinierter Eigenschaft:

Verwenden Sie die benutzerdefinierte Eigenschaft in den Animations-Keyframes:

@keyframes fadeIn {
  50% {--opacity: 1}
}

html {
  animation: 2s fadeIn infinite;
  background: rgba(0 0 0 / var(--opacity));
}

Hier Beispielsweise wird der Hintergrund des HTML-Elements basierend auf der Variablen --opacity, die schrittweise interpoliert wird, von vollständig transparent zu teilweise undurchsichtig animiert Zeit.

Das obige ist der detaillierte Inhalt vonWie kann ich benutzerdefinierte CSS-Eigenschaften animieren, um mehrere Elemente nacheinander anzuzeigen/auszublenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!