Was ist eine CSS -Animation mit @KeyFrames?
Jun 22, 2025 am 12:37 AM
@KeyFrames wird in CSS verwendet, um Keyframe -Animationen zu erstellen, sodass Entwickler die Elementstile in verschiedenen Phasen der Animation definieren k?nnen. 1. Geben Sie den Stil jeder Stufe der Animation durch Prozentsatz oder von/bis 0%, 50%bzw. 100%an, was auf den Start-, Zwischenstaaten und Endzust?nde hinweist; 2. Verwenden Sie das Animationsattribut, um die definierte Keyframe -Animation auf die Elemente anzuwenden, einschlie?lich des Festlegens des Animationsnamens, der Dauer, der Geschwindigkeitsfunktion, der Verz?gerung und der Anzahl der Wiedergabe usw.; 3. Es wird h?ufig verwendet, um komplexe benutzerdefinierte Animationseffekte wie Ladeindikatoren, Schwebeffekte, UI -Feedback und Hintergrundanimation zu implementieren. 4. Die Hinweise umfassen sicherzustellen, dass die Start- und Endrahmen enthalten sind, das durch Animation verursachte Layout-Jitter, das Testen der Browserkompatibilit?t und die Verwendung von Animations-Fill-Mode, um den Elementstil nach dem Ende der Animation zu steuern.
Eine CSS -Animation mit @keyframes ist eine M?glichkeit, zu definieren, wie ein Element w?hrend einer Animation bestimmte Punkte betrachten sollte. Im Gegensatz zu einfachen überg?ngen, die von einem Zustand zu einem anderen wechseln, k?nnen Sie bei Keyframe -Animationen jeden Schritt der Bewegung steuern - wie sich im Laufe der Zeit etwas bewegen, verblassen oder ?ndern.
Was macht @keyframes genau?
Sie verwenden @keyframes , um eine Reihe von Stilen zu erstellen, die in verschiedenen Phasen der Animation stattfinden. Diese Phasen werden normalerweise als Prozents?tze ausgedrückt:
-
0%bedeutet den Beginn der Animation -
50%bedeutet auf halbem Weg durch -
100%bedeutet das Ende
Sie k?nnen auch from und to statt 0% und 100% verwenden, aber die meisten Menschen bleiben an Prozents?tzen für mehr Kontrolle.
Zum Beispiel:
@keyframes Slide {
0% {
Transformation: Translatex (0);
}
50% {
Transformation: Translatex (100px);
}
100% {
Transformation: Translatex (0);
}
}Dies definiert eine grundlegende Hin- und Herbewegung.
So verwenden Sie @keyframes in Ihrem CSS
Sobald Sie Ihre Animation mit @keyframes definiert haben, müssen Sie sie mithilfe der animation (oder einzelnen Unterproperties) auf ein Element anwenden.
Hier ist ein Mindestbeispiel:
.Slide-Box {
Breite: 100px;
H?he: 100px;
Hintergrund: Blau;
Animationsname: Folie;
Animationsdauer: 2s;
Animations-Timing-Funktion: linear;
Animation-Delay: 0s;
Animationsveranstalter: Infinite;
}Oder Sie k?nnen es mit der Kurzschrift verkürzen:
.Slide-Box {
Animation: Folie 2S Linear Infinite;
}Einige gemeinsame Eigenschaften:
-
animation-name: Bezieht sich auf den in@keyframesangegebenen Namen -
animation-duration: Wie lange dauert ein Zyklus -
animation-timing-function: Steuert die Geschwindigkeitskurve (wielinear,ease-in-out) -
animation-delay: Wie lange Sie warten, bevor Sie anfangen -
animation-iteration-count: Wie oft spielt es (infiniteLoops für immer)
Wann sollten Sie Keyframe -Animationen verwenden?
Sie sind besonders nützlich, wenn Sie reibungslose, benutzerdefinierte Effekte wünschen, die bei überg?ngen nicht m?glich sind. Zum Beispiel:
- Laden von Spinnern oder Fortschrittsindikatoren
- Schwebeffekte, die mehrere Eigenschaften animieren
- Komplexes UI -Feedback (wie Schaltfl?chen, die auf Klick abprallen)
- Hintergrundanimationen oder Parallelaxeffekte
Da sie in CSS eingebaut sind, arbeiten sie auch in modernen Browsern, ohne JavaScript zu ben?tigen.
Denken Sie daran:
- Zu viele Animationen k?nnen Benutzer ablenken oder die Leistung verlangsamen.
- Testen Sie immer auf mobilen Ger?ten, auf denen die Ressourcen eingeschr?nkt sind.
- Verwenden Sie sie, um das funktionale Design zu verbessern, nicht zu ersetzen.
Ein paar Dinge, auf die man achten muss
Es gibt einige kleine Gotchas, wenn sie mit @keyframes arbeiten. Zum Beispiel:
- Wenn Sie vergessen,
0%oder100%einzuschlie?en, kann der Browser nicht reibungslos animieren. - Layout -Eigenschaften wie
width,heightodermargink?nnen zu Layout -Thrashing führen - sollten Sie stattdessentransformverwenden. - Die Browserunterstützung ist heutzutage solide, aber immer doppelt, wenn Sie auf ?ltere Plattformen abzielen.
Ein Detail, das die Leute oft vermissen, ist, dass das Element nach dem Ende der Animation, wenn Sie keinen animation-fill-mode angeben, nach Ende der Animation zu seinem ursprünglichen Stil zurückschnappt. Hinzufügen von animation-fill-mode: forwards h?lt es im Stil des letzten Frame.
Wenn Sie also alles zusammenfügen, k?nnen Sie @keyframes eine genaue Kontrolle darüber erhalten, wie sich Elemente w?hrend einer Animation verhalten. Es ist nicht schwer, sich einzurichten, wenn Sie die Grundlagen verstanden haben, aber es erfordert Aufmerksamkeit für das Timing und die Struktur. Grunds?tzlich ist es ein leistungsstarkes Werkzeug, sobald Sie den Dreh raus haben.
Das obige ist der detaillierte Inhalt vonWas ist eine CSS -Animation mit @KeyFrames?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
CSS-Animationshandbuch: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Blitzeffekte erstellen
Oct 20, 2023 pm 03:55 PM
CSS-Animationsleitfaden: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Blitzeffekte erstellen. Einführung: CSS-Animationen sind ein unverzichtbarer Bestandteil des modernen Webdesigns. Es kann lebendige Effekte und Interaktivit?t auf Webseiten bringen und das Benutzererlebnis verbessern. In dieser Anleitung werfen wir einen genaueren Blick darauf, wie man mit CSS einen Blitzeffekt erzeugt, zusammen mit konkreten Codebeispielen. 1. Erstellen Sie eine HTML-Struktur: Zuerst müssen wir eine HTML-Struktur erstellen, um unsere Blitzeffekte zu berücksichtigen. Wir k?nnen ein <div>-Element verwenden, um den Blitzeffekt zu umschlie?en und bereitzustellen
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Umbl?ttereffekte erzielen
Oct 24, 2023 am 09:30 AM
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Umbl?ttereffekte implementieren. Spezielle Codebeispiele sind erforderlich. CSS-Animationen sind ein unverzichtbarer Bestandteil des modernen Website-Designs. Es kann Webseiten lebendiger machen, die Aufmerksamkeit der Benutzer erregen und die Benutzererfahrung verbessern. Einer der h?ufigsten CSS-Animationseffekte ist der Umbl?ttereffekt. In diesem Tutorial werde ich Sie Schritt für Schritt anleiten, um diesen auff?lligen Effekt zu erzielen, und konkrete Codebeispiele bereitstellen. Zuerst müssen wir eine grundlegende HTML-Struktur erstellen. Der Code lautet wie folgt: <!DOCTYPE
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie den besonderen Effekt von flie?endem Wasser erzielen
Oct 21, 2023 am 08:52 AM
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie man den besonderen Effekt von flie?endem Wasser umsetzt. Vorwort: CSS-Animation ist eine h?ufig verwendete Technologie im Webdesign. Sie macht Webseiten lebendiger und interessanter ' Aufmerksamkeit. In diesem Tutorial lernen wir, wie man mit CSS einen flie?enden Wassereffekt erzielt, und stellen spezifische Codebeispiele bereit. Fangen wir an! Schritt eins: HTML-Struktur Zuerst müssen wir eine grundlegende HTML-Struktur erstellen. Fügen Sie ein <di zum <body>-Tag hinzu
Tipps und Methoden zur Verwendung von CSS, um Jitter-Effekte zu erzielen, wenn die Maus schwebt
Oct 21, 2023 am 08:37 AM
Tipps und Methoden zur Verwendung von CSS zum Erzielen von Jitter-Effekten beim Schweben der Maus. Die Jitter-Effekte beim Schweben der Maus k?nnen der Webseite etwas Dynamik und Interesse verleihen und die Aufmerksamkeit des Benutzers erregen. In diesem Artikel stellen wir einige Techniken und Methoden zur Verwendung von CSS vor, um Jitter-Effekte beim Bewegen der Maus zu erzielen, und stellen spezifische Codebeispiele bereit. Das Prinzip des Jitters In CSS k?nnen wir Keyframe-Animationen (Keyframes) und Transformationseigenschaften verwenden, um den Jitter-Effekt zu erzielen. Mit der Keyframe-Animation k?nnen wir eine Animationssequenz definieren
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Pulseffekte implementieren
Oct 21, 2023 pm 12:09 PM
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Impulseffekte implementieren. Es sind spezifische Codebeispiele erforderlich. Einführung: CSS-Animationen sind ein h?ufig verwendeter Effekt im Webdesign. Sie k?nnen Webseiten Lebendigkeit und visuelle Attraktivit?t verleihen. In diesem Artikel erhalten Sie ein detailliertes Verst?ndnis dafür, wie Sie mit CSS Impulseffekte erzielen, und stellen spezifische Codebeispiele bereit, die Ihnen Schritt für Schritt zeigen, wie Sie dies durchführen. 1. Verstehen Sie den Pulseffekt. Der Pulseffekt ist ein zyklischer Animationseffekt. Er wird normalerweise auf Schaltfl?chen, Symbolen oder anderen Elementen verwendet, um ihm einen schlagenden und blinkenden Effekt zu verleihen. Animieren von Eigenschaften und Schlüsseln über CSS
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie den Ein- und Ausblendeffekt erzielen
Oct 18, 2023 am 09:22 AM
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie den Ein- und Ausblendeffekt implementieren, einschlie?lich spezifischer Codebeispiele. Bei Webdesign und -entwicklung k?nnen Animationseffekte die Seite lebendiger und attraktiver machen. CSS-Animationen sind eine einfache und leistungsstarke M?glichkeit, diesen Effekt zu erzielen. In diesem Artikel erfahren Sie Schritt für Schritt, wie Sie mit CSS den Fade-Effekt erzielen, und stellen spezifische Codebeispiele als Referenz bereit. 1. Einblendeffekt Der Einblendeffekt bezieht sich auf den Effekt, bei dem ein Element allm?hlich von einer Transparenz von 0 zu einer Transparenz von 1 wechselt. Hier sind die Schritte und das Codebeispiel, um den Einblendeffekt zu erzielen: Schritt 1:
Erkundung der CSS-Animationseigenschaften: übergang und Transformation
Oct 20, 2023 pm 03:54 PM
Erkundung der CSS-Animationseigenschaften: übergang und Transformation. Um die Interaktivit?t und die visuellen Effekte von Webseiten zu erh?hen, verwenden wir in der Webentwicklung h?ufig CSS-Animationen, um den übergang und die Transformation von Elementen zu realisieren. In CSS gibt es zwei h?ufig verwendete Eigenschaften, mit denen Animationseffekte erzielt werden k?nnen: übergang und Transformation. In diesem Artikel wird die Verwendung dieser beiden Eigenschaften ausführlich untersucht und spezifische Codebeispiele gegeben. 1. übergangsattribut transitio
Tipps und Methoden zur Verwendung von CSS zur Erzielung spezieller Effekte für die Bildanzeige
Oct 24, 2023 pm 12:52 PM
Tipps und Methoden zur Verwendung von CSS zur Erzielung spezieller Effekte für die Bildanzeige Ob es sich um Webdesign oder Anwendungsentwicklung handelt, die Bildanzeige ist eine sehr h?ufige Anforderung. Um das Benutzererlebnis zu verbessern, k?nnen wir mithilfe von CSS einige coole Bildanzeigeeffekte erzielen. In diesem Artikel werden mehrere h?ufig verwendete Techniken und Methoden vorgestellt und entsprechende Codebeispiele bereitgestellt, um den Lesern den schnellen Einstieg zu erleichtern. 1. Bildzoom-Spezialeffekte Zoom-Maus-Hover-Effekt Wenn die Maus über dem Bild schwebt, kann die Interaktivit?t durch den Zoom-Effekt erh?ht werden. Das Codebeispiel lautet wie folgt: .image-zoom{
