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!