So verwenden Sie CSS3-Animationseigenschaften

Sammeln Sie für alle @keyframes-Regeln und alle Animationsattribute Wir alle wissen, dass @keyframes das Festlegen von Animationen bedeutet Jeder versteht es, werfen wir einen Blick darauf. Eigenschaft Beschreibung CSS

@keyframes Gibt die Animation an.

animation Abkürzungseigenschaft für alle Animationseigenschaften, mit Ausnahme der Eigenschaft „animation-play-state“.

animation-name gibt den Namen der @keyframes-Animation an.

animation-duration gibt die Sekunden oder Millisekunden an, die die Animation benötigt, um einen Zyklus abzuschließen. Der Standardwert ist 0.

Animation-Timing-Function gibt die Geschwindigkeitskurve der Animation an. Der Standardwert ist „einfach“.

animation-delay gibt an, wann die Animation beginnt. Der Standardwert ist 0.

animation-iteration-

count

gibt an, wie oft die Animation abgespielt wird. Der Standardwert ist 1.

Animation- Richtung Legt fest, ob die Animation im nächsten Zyklus im nächsten Zyklus abgespielt wird. Der Standardwert ist „normal“.

animation-play-state gibt an, ob die Animation läuft oder pausiert. Der Standardwert ist „läuft“. Die folgenden zwei Beispiele legen alle Animationseigenschaften fest:

OperaSafari

Chr

omeFirefoxInternet Explorer

InstanceFühren Sie meine erste Animation aus und legen Sie alle fest Attribute:

div

{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

Ich glaube, dass Sie die Methode nach dem Lesen dieser Fälle beherrschen. Für weitere spannende Inhalte achten Sie bitte auf PHP-Chinesisch Website

Weitere
verwandte Artikel!

Verwandte Lektüre:

Schritte zum Erzielen eines 3D-Suspensionseffekts in HTML

So erstellen Sie Feuerwerkspartikeleffekte mit H5

So ändern Sie den Mouseover-Stil ohne Verwendung von CSS

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3-Animationseigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!