Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS3 Animationseffekte erzielen (Code-Sharing)

Vorheriger Artikel „H5: Mehrere Möglichkeiten, Animationen in Seiten zu implementieren? (Angehängter Code) “, informiert Sie über verschiedene Möglichkeiten, Animationen auf der Seite zu implementieren. Im folgenden Artikel erfahren Sie, wie Sie mit CSS3 einen einfachen und schönen Animationseffekt erzielen. Schauen wir uns die Animation von CSS3 an, die mir fast nicht mehr gefallen hat Damals, aber es ist schade, dass sich die Zeiten geändert haben. Behandeln Sie diesen Artikel einfach als Dokument

Browser-Unterstützung

Internet Explorer 10, Firefox und Opera unterstützen das Animationsattribut.

Safari und Chrome unterstützen das alternative Attribut -webkit-animation.

Hinweis: Internet Explorer 9 und frühere Versionen unterstützen die Animationseigenschaft nicht.

Definition und Verwendung

Animation Eigenschaft ist ein Kurzeigeneignis für die Festlegung von sechs Animationseigenschaften:

Animation-name

• animation-Dauer Animationsverzögerung

• Animationsiterationsanzahl Animationsrichtung -Funktion
• Gibt die Animation an. Die Geschwindigkeitskurve
  kann den Wert linear annehmen , Ease (Ein- und Ausblenden), Ease-In, Ease-Out, Ease-In-Out, Kubikbezier(n, n, n, n)

• animation-play-state

Gibt an, ob die Animation läuft oder pausiert.

paused bedeutet angehaltener Zustand, läuft bedeutet laufender Zustand

Animationsname gibt den Keyframe-Namen an, der an den Selektor gebunden werden mussGibt an, wie oft die Animation abgespielt werden sollDer optionale Wert ist unendlich (unendlich) n (z. B. 5 Mal)none (Standard) / vorwärts (nachdem die Animation abgeschlossen ist) / rückwärts (bevor die Animation angezeigt wird) / beide (beide); Muss angegeben werden, andernfalls wird die Animation nicht ausgeführt der Reihe nach rückwärts abgespielt werden. links und rechts Definiert die Zeit, die vor dem Start der Animation gewartet werden soll, in Sekunden oder Millisekunden. Der Standardwert ist 0. Die Einheit ist s. Über die Definition von Keyframes. Firefox unterstützt alternative @-moz-Keyframes-Regeln Safari und Chrome unterstützen alternative @-webkit-Keyframes-Regeln; unterstützt 0-100 % und von, bis.

animation: name duration timing-function delay iteration-count direction;

Das Folgende ist der Code Tutorial

@keyframe { von {opcity:0} bis {opcity:1}}		animation-iteration-count
	animation-fill-mode	Animation vor oder nach der Wiedergabe, ob der Animationseffekt sichtbar ist.
	animationsdauer	Gibt die Zeit an, die zum Abschließen der Animation benötigt wird Sekunden oder Millisekunden
	animation-delay	Gibt die Verzögerung vor dem Start der Animation an.
	Demo Ich habe ein Beispiel geschrieben: Die Erde dreht sich um die Sonne.

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS3 Animationseffekte erzielen (Code-Sharing). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!