Wie kann ich mehrere Instanzen einer benutzerdefinierten CSS-Eigenschaft mit einer einzigen Animation animieren?

Benutzerdefinierte Eigenschaften in CSS animieren

In CSS bieten benutzerdefinierte Eigenschaften, auch CSS-Variablen genannt, einen robusten Mechanismus zum Definieren und Wiederverwenden von Stilen Werte während eines Projekts. Sie bieten die Möglichkeit, eine Stileigenschaft basierend auf einem vordefinierten Wert oder einer vordefinierten Variable dynamisch zu ändern. Wenn es um Animationen geht, können benutzerdefinierte Eigenschaften jedoch manchmal eine Herausforderung darstellen.

Eine solche Herausforderung entsteht, wenn versucht wird, mehrere Instanzen einer bestimmten Eigenschaft mit einer einzigen Animation zu animieren. Durch die Nutzung benutzerdefinierter Eigenschaften möchten Entwickler erreichen, dass alle nachfolgenden Instanzen von derselben Animation betroffen sind. In bestimmten Fällen wird jedoch nur eine Instanz der gewünschten Animation unterzogen, während die übrigen Instanzen davon nicht betroffen sind.

Benutzerdefinierte Eigenschaften in Animationen verstehen

Das Problem hat seinen Ursprung im Grundlegenden Verhalten benutzerdefinierter Eigenschaften in Animationen. Bei der Definition mit der herkömmlichen CSS-Syntax werden benutzerdefinierte Eigenschaften während der Animation als statische Werte behandelt. Dies bedeutet, dass die Eigenschaftswerte nicht über die Animationsdauer interpoliert werden, was eher zu einer plötzlichen Änderung als zu einem allmählichen Übergang führt.

Lösung: Verwendung der @property-Regel

Um diese Einschränkung zu überwinden, können Entwickler die @property-Regel in Verbindung mit benutzerdefinierten Eigenschaften verwenden. Die @property-Regel ermöglicht die Definition von Variablen durch Angabe ihrer Typen und Bereitstellung von Anfangswerten. Durch die Deklaration einer benutzerdefinierten Eigenschaft als Zahl kann der Browser beispielsweise die Eigenschaft als numerischen Wert interpretieren und sanfte Übergänge und Animationen ermöglichen.

Beispielimplementierung:

Betrachten Sie das folgende Beispiel, in dem wir ein blinkendes div-Element mithilfe einer benutzerdefinierten Eigenschaft für die Deckkraft erstellen möchten:

@property --opacity {
  syntax: '<number>'; /* Define as type number for transition */
  initial-value: 0;
  inherits: false;
}

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

#test {
  width: 100px;
  height: 200px;
  background-color: black;
  animation: fadeIn 1s infinite;
}

#test div {
  width: 20px;
  height: 20px;
  margin: auto;
  background-color: white;
  opacity: var(--opacity);
}

Using Bei diesem Ansatz wird die benutzerdefinierte Eigenschaft --opacity als Zahl definiert, sodass die Animation den Opazitätswert über die Dauer der Animation gleichmäßig interpolieren kann, um den gewünschten Blinkeffekt zu erzielen.

Das obige ist der detaillierte Inhalt vonWie kann ich mehrere Instanzen einer benutzerdefinierten CSS-Eigenschaft mit einer einzigen Animation animieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!