CSS @KeyFrames wird verwendet, um die verschiedenen Phasen und ?nderungen von Animationen zu definieren. 1) Grundnutzung: Definieren Sie Animationen über @KeyFrames, z. B. Fadein wechseln von transparent zu undurchsichtig. 2) Loop -Animation: Verwenden Sie das unendliche Schlüsselwort, um kontinuierliche Rotationseffekte zu erzeugen. 3) Leistungsoptimierung: Verwenden Sie das Willensmodellattribut, um die Animationsflüssigkeit zu verbessern. 4) Zug?nglichkeit: Passen Sie die Animationen an die Benutzereinstellungen an, die durch Medienabfragen von Vorlieben reduziert werden. 5) Flexible Kontrolle: Kombinieren Sie CSS -Variablen, um die Animation von Farb?nderungen zu erreichen. 6) Passen Sie den Effekt an: Machen Sie die Animation natürlicher, indem Sie die Dauer und die Zeitfunktion ?ndern.

Die CSS @keyframes -Regel ist der Kern der Animation, die die verschiedenen Stufen und ?nderungen der Animation definiert. In diesem Artikel werden wir uns mit @keyframes eintauchen, um reichhaltige Animationseffekte zu erstellen, nicht nur einfache überg?nge, sondern auch einige komplexe Anwendungsszenarien und Best Practices.

Wenn es um die Anwendung von @keyframes geht, müssen wir seine Bedeutung im modernen Webdesign berücksichtigen. Animation ist nicht nur eine visuelle Dekoration, sondern auch ein wichtiges Mittel, um die Benutzererfahrung zu verbessern. Mit @keyframes k?nnen wir die ?nderungen von Elementen auf der Timeline pr?zise steuern, was zu reibungslosen und überzeugenden Animationseffekten führt.

Beginnen wir mit einem einfachen Beispiel, um die grundlegende Verwendung von @keyframes zu veranschaulichen:

 @keyframes fadein {
  aus {
    Deckkraft: 0;
  }
  Zu {
    Deckkraft: 1;
  }
}

.fade-in {
  Animation: Fadein 2s Leichter;
}

In diesem Beispiel definieren wir eine Animation namens fadeIn , die sich allm?hlich von vollst?ndig transparent ( opacity: 0 ) zu vollst?ndig Deckkraft ( opacity: 1 ) ?ndert. Anschlie?end wenden wir diese Animation auf ein Element mit einer fade-in an, setzen die Animationsdauer auf 2 Sekunden und verwenden ease-in als übergangseffekt.

Lassen Sie uns nun die Nutzungstipps von @keyframes und einige erweiterte Anwendungen untersuchen.

Zun?chst k?nnen wir @keyframes verwenden, um Schleifenanimationen zu erstellen, was beim Erstellen von Ladeindikatoren oder Hintergrundanimationen sehr nützlich ist:

 @keyframes spin {
  aus {
    Transformation: Drehen (0DEG);
  }
  Zu {
    Transformation: Drehen (360 Grad);
  }
}

.Loading-Spinner {
  Animation: Spin 1s linear unendlich;
}

In diesem Beispiel führt die spin -Animation dazu, dass sich die Elemente kontinuierlich drehen, und das infinite Schlüsselwort stellt sicher, dass die Animation unendlich schleifen. linear sorgt für eine konstante Drehzahl und hat nicht den Einfluss von Beschleunigung und Verz?gerung wie ease-in .

Bei der Verwendung @keyframes müssen wir auch auf die Leistung von Animationen achten. Zu viel komplexe Animation kann zu einer Abbau von Seitenleistung führen, insbesondere auf mobilen Ger?ten. Um die Leistung zu optimieren, k?nnen wir will-change verwenden, um den Browser zu fordern, den Eigenschaften ?ndern, um sich im Voraus vorzubereiten:

 @Keyframes Slidein {
  aus {
    Transformation: Translatex (-100%);
  }
  Zu {
    Transformation: Translatex (0);
  }
}

.Slide-in {
  Willens?nderung: Transformation;
  Animation: Slidein 0,5s Easy-Out;
}

Hier verwenden wir will-change: transform , um den Browser mitzuteilen, dass sich transform ?ndert, wodurch die Gl?tte der Animation verbessert wird.

Ein weiterer Aspekt ist die Zug?nglichkeit von Animationen. Animation kann bei einigen Nutzern unangenehm sind, insbesondere bei solchen mit Epilepsie oder dysmotischen St?rungen. Zu diesem Zweck k?nnen wir Medienabfrage prefers-reduced-motion verwenden, um Benutzereinstellungen zu erkennen und die Animation entsprechend anzupassen:

 @keyframes fadein {
  aus {
    Deckkraft: 0;
  }
  Zu {
    Deckkraft: 1;
  }
}

.fade-in {
  Animation: Fadein 2s Leichter;
}

@media (bevorzugt-reduzierte Bewegung: reduzieren) {
  .fade-in {
    Animation: Keine;
  }
}

Mit dieser Einstellung werden unsere Animationen deaktiviert, wenn der Benutzer die Option zur Bewegung reduzieren und so die Zug?nglichkeit der Webseite verbessert.

In tats?chlichen Projekten stellte ich fest, dass @keyframes in Verbindung mit CSS -Variablen (benutzerdefinierte Eigenschaften) verwendet werden k?nnen, um eine flexiblere Animationskontrolle zu erreichen. Zum Beispiel k?nnen wir eine Animation von Farb?nderungen definieren und CSS -Variablen verwenden, um die Farbe zu steuern:

 :Wurzel {
  -Startfarbe: #ff0000;
  --end-color: #00ff00;
}

@keyframes colorChange {
  aus {
    Hintergrundfarbe: var (-Startfarbe);
  }
  Zu {
    Hintergrundfarbe: var (-Endfarbe);
  }
}

.Color-Change {
  Animation: ColorChange 3s Leichte in unendlichem Alter;
}

In diesem Beispiel verwenden wir CSS -Variablen, um die Start- und Endfarben der Animation zu definieren, sodass der Animationseffekt leicht angepasst werden kann, ohne die @keyframes -Regel zu ?ndern.

Schlie?lich m?chte ich ein Problem teilen, auf das ich gesto?en bin: Wenn die Animation zu kurz dauert, kann die @keyframes dazu führen, dass die Animation nicht glatt genug aussieht. Um dieses Problem zu l?sen, passe ich normalerweise die Dauer der Animation an und versuche unterschiedliche timing-function um die besten Ergebnisse zu finden:

 @keyframes sprung {
  0%, 100% {
    Transformation: Translatey (0);
  }
  50% {
    Transformation: Translatey (-20px);
  }
}

.Bounce {
  Animation: Sprung von 0,8S LEART-IN-OUT INFINITE;
}

In diesem Beispiel fand ich, dass die Festlegung der Animationszeit auf 0,8 Sekunden und die Verwendung von ease-in-out als Timing-Funktion den Bounce-Effekt natürlicher und glatter macht.

Im Allgemeinen ist @keyframes ein leistungsstarkes und flexibles Werkzeug in CSS, durch das wir eine Vielzahl komplexer und überzeugender Animationseffekte erstellen k?nnen. Durch die Einführung und Beispiele dieses Artikels hoffe ich, dass Sie besser verstehen, wie @keyframes verwendet wird, und diese Techniken flexibel in realen Projekten anwenden.

Das obige ist der detaillierte Inhalt von@KeyFrames CSS: Beste Codebeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!