Inhaltsverzeichnis
1. Was ist Animation? In CSS können Sie @keyframes verwenden, um Animationen zu definieren Ist eine Animation definiert, kann diese über die Animationseigenschaft aufgerufen werden.
Dauer: Animationsdauer
Heim Web-Frontend CSS-Tutorial Wie spiele ich mit CSS-Animationen? (organisieren und teilen)

Wie spiele ich mit CSS-Animationen? (organisieren und teilen)

Dec 21, 2021 pm 06:47 PM
css

Dieser Artikel vermittelt Ihnen relevantes Wissen über Animationen in CSS, einschließlich der Frage, was Animation ist, wie man Animationen aufruft und wie man Multi-Keyframe-Animationen implementiert.

Wie spiele ich mit CSS-Animationen? (organisieren und teilen)

1. Was ist Animation? In CSS können Sie @keyframes verwenden, um Animationen zu definieren Ist eine Animation definiert, kann diese über die Animationseigenschaft aufgerufen werden.

Basisattribute der Animation:

Name: der Name der Animation

(anfänglicher Standardwert keiner)

Dauer: Animationsdauer

(anfänglicher Standardwert 0 s)

Timing-Funktion: Geschwindigkeitskurve ändern

(anfänglicher Standardwert „ease“) )

    Verzögerung: Verzögerungszeit (wie viel Zeit vergeht, bevor die Animation beginnt)
  • (anfänglicher Standardwert 0s)
  • iteration-count: Anzahl der Animationsausführungen
  • (anfänglicher Standardwert 1, wenn Sie möchten, dass die Animation für immer ausgeführt wird, schreibe unendlich)
@keyframes rotation { /* rotation 动画名 */
    from {   /* 起始状态 */ 
        transform: rotate(0);
    }
    to {    /* 结束状态 */ 
        transform: rotate(360deg);
    }}
  • außer Darüber hinaus gibt es einige Attribute:
  • animation-direction (legen Sie fest, ob die Animation der Reihe nach in umgekehrter Reihenfolge abgespielt werden soll)

  • normal: Spielen Sie die Animation auf normale Weise ab (anfängliche Standardeinstellung). Wert)
  • reverse: In umgekehrter Reihenfolge abspielen Animation

    alternate: Das 2., 4., 6. Mal... (gerade Zahlen) der Animation automatisch umkehren lassen

    alternate-reverse: Lassen Sie die ungeraden Zahlen Zeiten der Animation werden automatisch umgekehrt.

    • animation-fill-mode (als Animation festlegen Der Status der Animation, wenn sie nicht abgespielt wird)
    • none: Das Standardverhalten der Animation nicht ändern

    • forwards: Stoppen Sie die Animation im endgültigen Endzustand.
    Rückwärts: Wenden Sie die erste Animation innerhalb des durch Animationsverzögerung festgelegten Zeitraums an. Stile in Schlüsselbildern.

    Beide: Befolgen Sie gleichzeitig die Regeln für Vorwärts- und Rückwärtsanimation -Play-State (Legen Sie fest, ob die Animation abgespielt oder angehalten wird)

    • paused: Anhalten der Wiedergabe der Animation
    • running: normale Wiedergabe der Animation
    • 3. Für Animationen, die ausgeführt werden sollen Um mehrere Effekte zu erzielen, können Sie zu diesem Zeitpunkt Multi-Keyframes verwenden.
    • Allgemeine Struktur:
    animation:  name | duration | timing function | delay | iteration-count;

    (Lernvideo-Sharing: CSS-Video-Tutorial)

    Das obige ist der detaillierte Inhalt vonWie spiele ich mit CSS-Animationen? (organisieren und teilen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

    Heiße KI -Werkzeuge

    Undress AI Tool

    Undress AI Tool

    Ausziehbilder kostenlos

    Undresser.AI Undress

    Undresser.AI Undress

    KI-gestützte App zum Erstellen realistischer Aktfotos

    AI Clothes Remover

    AI Clothes Remover

    Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

    Clothoff.io

    Clothoff.io

    KI-Kleiderentferner

    Video Face Swap

    Video Face Swap

    Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

    Heiße Werkzeuge

    Notepad++7.3.1

    Notepad++7.3.1

    Einfach zu bedienender und kostenloser Code-Editor

    SublimeText3 chinesische Version

    SublimeText3 chinesische Version

    Chinesische Version, sehr einfach zu bedienen

    Senden Sie Studio 13.0.1

    Senden Sie Studio 13.0.1

    Leistungsstarke integrierte PHP-Entwicklungsumgebung

    Dreamweaver CS6

    Dreamweaver CS6

    Visuelle Webentwicklungstools

    SublimeText3 Mac-Version

    SublimeText3 Mac-Version

    Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

    Heiße Themen

    PHP-Tutorial
    1511
    276
    Was sind die Apps für virtuelle Währungshandel? _Die Top Ten empfohlene offizielle Apps Virtual Currency Trading Apps im Jahr 2025 Was sind die Apps für virtuelle Währungshandel? _Die Top Ten empfohlene offizielle Apps Virtual Currency Trading Apps im Jahr 2025 Aug 08, 2025 pm 06:42 PM

    1. Binance ist bekannt für sein riesiges Transaktionsvolumen und die reichhaltigen Handelspaare. Es bietet diversifizierte Handelsmodelle und perfekte Ökosysteme. Es gewährleistet auch die Sicherheit von Benutzeranlagen über SAFU -Fonds und mehrere Sicherheitstechnologien und erhält den konformen Vorgängen von großer Bedeutung. 2. OKX Ouyi bietet eine breite Palette von Handelsdiensten für digitale Asset und einheitliche Handelskonto -Modelle, bereitet das Web3 -Feld aktiv bereit und verbessert die Sicherheit und Erfahrung der Transaktion durch strenge Risikokontrolle und Benutzerausbildung. 3.. Gate.io Sesam öffnet die Tür und verfügt über eine gute Währungsgeschwindigkeit und eine reichhaltige Währung, bietet diversifizierte Handelsinstrumente und Wertschöpfungsdienste, nimmt mehrere Sicherheitsüberprüfungsmechanismen an und hält sich an die Transparenz von Asset-Reserven zur Verbesserung des Benutzervertrauens. V.

    So verwenden Sie VW- und VH -Einheiten in CSS So verwenden Sie VW- und VH -Einheiten in CSS Aug 07, 2025 pm 11:44 PM

    VW- und VH -Einheiten erreichen reaktionsschnelles Design, indem sie Elementgrößen mit Ansichtsfenster und Höhe in Verbindung bringen. 1 VW entspricht 1% der Ansichtsfensterbreite, und 1 VH entspricht 1% der Ansichtsfensterhöhe; häufig im Vollbildbereich, reaktionsschnellen Schriftarten und elastischen Abstand verwendet; 1. Verwenden Sie im Vollbildbereich 100VH oder besser 100DVH, um den Einfluss der Mobile Browser -Adressleiste zu vermeiden. 2. Responsive Schriftarten können mit 5 VW begrenzt und mit einer Klemme (1,5REM, 3VW, 3REM) in Kombination der minimalen und maximalen Größe begrenzt werden. 3. Elastischer Abstand wie Breite: 80VW, Rand: 5VHAUTO, Polsterung: 2VH3VW, kann das Layout anpassungsfähig machen; Achten Sie auf Kompatibilität, Zugänglichkeit und Inhaltskonflikte für mobile Geräte. Es wird empfohlen, zuerst DVH zu verwenden.

    So verwenden Sie die Filtereigenschaft in CSS So verwenden Sie die Filtereigenschaft in CSS Aug 11, 2025 pm 05:29 PM

    ThecssFilterPropertyAllowsvisualeffects-ähnlich, Helligkeit und GryscaletobeAppliedDirecttoHtmlelements.1) Usethesyntaxfilter: Filterfunktion (Wert) toappyeffects.2) Kombination

    So erstellen Sie eine vertikale Linie mit CSS So erstellen Sie eine vertikale Linie mit CSS Aug 11, 2025 pm 12:49 PM

    Verwenden Sie einen DIV mit Rand, um schnell vertikale Linien zu erstellen und Stile und Höhen zu definieren, indem Sie randlinks und Höhe einstellen. 2. Verwendung :: vor oder :: Nach Pseudoelementen, um vertikale Linien ohne zusätzliche HTML-Tags hinzuzufügen, die für die dekorative Trennung geeignet sind; 3. In Flexbox -Layout können adaptive vertikale Trennwände zwischen elastischen Behältern erreicht werden, indem die Breite und die Hintergrundfarbe der Trennklasse festgelegt werden. 4. Fügen Sie in CSSGrid vertikale Linien als unabhängige Spalten (z. B. Autowidth -Spalten) in das Gitterlayout ein, das für reaktionsschnelles Design geeignet ist. Die am besten geeignete Methode sollte gemäß dem spezifischen Layout ausgewählt werden, um sicherzustellen, dass die Struktur einfach und leicht zu warten ist.

    Was sind CSS-Pseudoklassen und wie man sie benutzt? Was sind CSS-Pseudoklassen und wie man sie benutzt? Aug 06, 2025 pm 01:06 PM

    Die CSS-Pseudo-Klasse ist ein Schlüsselwort, mit dem der spezielle Zustand eines Elements definiert wird. Es kann dynamisch Stile anwenden, basierend auf Benutzerinteraktion oder Dokumentenort. 1.: Hover wird ausgelöst, wenn die Maus schwebt, z. B. die Taste: HOVER ändert die Knopffarbe. 2.: Fokus wirkt sich in Wirksamkeit, wenn das Element den Fokus erhält und die Zugänglichkeit verbessert. 3.: nt-child () wählt Elemente nach Position aus und unterstützt ungerade, sogar oder Formeln wie 2n 1; 4.: Erstkind und: Last-Kind Wählen Sie die ersten bzw. letzten Kinderelemente aus; 5.:Not () schließt Elemente aus, die den angegebenen Bedingungen entsprechen; 6.: Besuchen und: Link -Set -Stile basierend auf dem Linkzugriffsstatus, aber: Besucht wird durch Privatsphäre eingeschränkt.

    Wie können Sie eine CSS -Klasse mit JavaScript aus einem DOM -Element entfernen? Wie können Sie eine CSS -Klasse mit JavaScript aus einem DOM -Element entfernen? Aug 05, 2025 pm 12:51 PM

    Die häufigste und empfohlene Methode zum Entfernen von CSS -Klassen aus DOM -Elementen unter Verwendung von JavaScript ist die Methode von REME () der Classlist -Eigenschaft. 1. Verwenden Sie Element.ClassList.remove ('className'), um einen einzelnen oder mehrere Klassen sicher zu löschen, und es wird kein Fehler gemeldet, selbst wenn die Klasse nicht vorhanden ist. 2. Die alternative Methode besteht darin, die Eigenschaft der Klassenname direkt zu bedienen und die Klasse mit einem String -Austausch zu entfernen. Aufgrund der ungenauen regelmäßigen Übereinstimmung oder einer unsachgemäßen Raumverarbeitung ist es jedoch einfach, Probleme zu verursachen, sodass sie nicht empfohlen wird. 3. Sie können zuerst beurteilen, ob die Klasse existiert, und sie dann durch Element.ClassList.Contains () löschen, aber es ist normalerweise nicht erforderlich. 4. Classlist

    Wie benutze ich CSS Clamp () für reaktionsschnelle Typografie? Wie benutze ich CSS Clamp () für reaktionsschnelle Typografie? Aug 06, 2025 pm 04:51 PM

    clamp () incssenablesfluid, ResponsivetypographyBysettingAvaluebetweenaminimum, bevorzugt und maximumsize; 1.Usclamp (min, bevorzugt, max)

    Wie man einen Linienbruch in CSS verhindert Wie man einen Linienbruch in CSS verhindert Aug 08, 2025 pm 05:14 PM

    Usewhite-Space: NowRaptopReVventTextFromBreakingontomultiplelinines, sicherstellen, dass ContentStaysonasingLine

    See all articles