Wie kann ich benutzerdefinierte CSS-Eigenschaften reibungslos animieren?

Benutzerdefinierte Eigenschaften in CSS animieren

Mit dem Ziel, mehrere innere Divs synchron zu animieren, versuchte ein Entwickler, CSS-Variablen zu verwenden, stieß jedoch auf Probleme. Während CSS-Variablen in Animationen verwendet werden können, liegt das Problem im unerwarteten Verhalten abrupter Übergänge statt sanfter Interpolationen.

Die Lösung besteht darin, die @property-Regel zu verwenden, die den Typ der animierten Variablen definiert. In diesem Fall wird die Deckkraft als Zahl angegeben, sodass der Browser sie als solche wahrnehmen und eine schrittweise Animation ermöglichen kann.

Codebeispiel:

@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 In diesem Beispiel wird die Opazitätsvariable explizit als Zahl definiert und die Animationseigenschaft fadeIn verwendet CSS-Variablen, um den gewünschten allmählichen Übergangseffekt auf dem Hintergrund des HTML-Elements zu erzielen Deckkraft.

Das obige ist der detaillierte Inhalt vonWie kann ich benutzerdefinierte CSS-Eigenschaften reibungslos animieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!