Warum werden meine CSS-Variablen nicht animiert?

Benutzerdefinierte CSS-Eigenschaften/-Variablen animieren

Bei dem Versuch, eine Reihe innerer Divs mithilfe von CSS-Variablen zu animieren, ist ein Entwickler auf Schwierigkeiten gestoßen. Trotz der Verwendung von @keyframes zum Definieren einer Animation bleibt das Ergebnis eine statische Blackbox.

Die Lösung: Verwendung von @property

Um dieses Problem zu beheben, sollten CSS-Variablen vorhanden sein definiert mit @property. Dies ermöglicht die Angabe des Typs der Variablen, sodass der Browser sie beispielsweise als Zahl erkennen kann. Mit diesem Verständnis kann der Browser dann nahtlos Übergänge für diese Variable animieren.

Beispielcode:

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

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

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

In diesem Beispiel definiert @property --opacity als eine Zahl. Innerhalb der FadeIn-Animation erhöht sich die Deckkrafteigenschaft bei der 50 %-Marke allmählich auf 1. Anschließend geht die Hintergrundfarbe des HTML-Elements basierend auf der Variablen --opacity sanft in ein halbtransparentes Schwarz über.

Das obige ist der detaillierte Inhalt vonWarum werden meine CSS-Variablen nicht animiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!