Wie kann ich mit mehreren benutzerdefinierten CSS-Eigenschaften flüssige Animationen erzielen?

Benutzerdefinierte CSS-Eigenschaften für reibungslose Animationen verwenden

Beim Versuch, mehrere Elemente gleichzeitig mit benutzerdefinierten CSS-Eigenschaften zu animieren, stoßen Benutzer häufig auf Probleme mit abrupten Eigenschaftsänderungen statt sanfter Übergänge. Dieser Artikel befasst sich mit einer Lösung zum Erreichen der gewünschten Animationseffekte.

Anstatt sich auf Variablen zu verlassen, die keine Werte in Animationen interpolieren, besteht ein effektiverer Ansatz darin, mithilfe von @property definierte CSS-Eigenschaften zu verwenden. Diese Methode ermöglicht die explizite Deklaration von Eigenschaftstypen, sodass der Browser Eigenschaften wie --opacity genau als Zahlen interpretieren und animieren kann.

Beispielimplementierung

Zur Demonstration Betrachten Sie für diese Technik den folgenden Code:

@property --opacity {
  syntax: '<number>'; /* Declaring type as 'number' for transition */
  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 ist die benutzerdefinierte Eigenschaft --opacity als definiert @property mit dem Typ „Nummer“. Dadurch kann der Browser --opacity als numerischen Wert erkennen und ihn während Animationen reibungslos interpolieren. Die Einblend-Keyframe-Animation erhöht dann schrittweise die Deckkraft von 0 auf 1 bei der 50 %-Marke, was zu einem sanften Einblendeffekt für die Hintergrundfarbe des HTML-Elements führt.

Das obige ist der detaillierte Inhalt vonWie kann ich mit mehreren benutzerdefinierten CSS-Eigenschaften flüssige Animationen erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!