Was ist die zusammengesetzte Schreibmethode, um eine CSS3-Animation einmal auszuführen?-Front-End-Fragen und Antworten-php.cn

Was ist die zusammengesetzte Schreibmethode, um eine CSS3-Animation einmal auszuführen?

WBOY

Freigeben： 2022-06-14 15:38:24

Original

2197 Leute haben es durchsucht

Die zusammengesetzte Schreibmethode zum einmaligen Festlegen der Animationsausführung in CSS3 lautet „Animation: Name Zeitgeschwindigkeit Verzögerung 1, ob rückwärts abgespielt werden soll“, wobei „1“ die Häufigkeit darstellt, mit der die Animation abgespielt wird, also die Häufigkeit Die Animation wird ausgeführt; Animation ist ein abgekürztes Attribut mit Es wird verwendet, um den Namen des Aktions-Keyframes, die Animationszeit, die Geschwindigkeitskurve, die Animationsverzögerung, die Animationszeiten und die Angabe zu bestimmen, ob die Animation für die Elementanimation in umgekehrter Reihenfolge abgespielt werden soll.

Was ist die zusammengesetzte Schreibmethode, um eine CSS3-Animation einmal auszuführen?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was ist die zusammengesetzte Schreibmethode für CSS3-Animationen, die einmal ausgeführt werden sollen?

In CSS3 lautet der Animationsattributname „Animation“.

Dieses Attribut ist ein Abkürzungsattribut, mit dem der gebundene Keyframe-Name, die Animationszeit und die Geschwindigkeit angegeben werden Kurve, Animationsverzögerung, Animationszeiten und ob die Animation rückwärts abgespielt werden soll.

Die Syntax lautet:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Nach dem Login kopieren

Animationsname gibt den Namen des Keyframes an, der an den Selektor gebunden werden soll.
Animationsdauer Animation gibt an, wie viele Sekunden oder Millisekunden abgeschlossen werden sollen.
animation-timing-function Legt fest, wie die Animation einen Zyklus abschließt.
animation-delay Legt das Verzögerungsintervall fest, bevor die Animation beginnt.
animation-iteration-count definiert die Häufigkeit, mit der die Animation abgespielt wird.
animation-direction gibt an, ob die Animation der Reihe nach rückwärts abgespielt werden soll.
animation-fill-mode gibt den Stil an, der auf das Element angewendet werden soll, wenn die Animation nicht abgespielt wird (wenn die Animation abgeschlossen ist oder wenn es eine Verzögerung gibt, bevor die Animation abgespielt wird).
animation-play-state gibt an, ob die Animation läuft oder pausiert.

Um die zusammengesetzte Animation nur einmal zu schreiben, setzen Sie einfach den Wert „animation-iteration-count“ auf 1.

Das Beispiel sieht wie folgt aus:

<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 3s 1;
/* Safari and Chrome */
-webkit-animation:mymove 3s 1;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 animation-iteration-count 属性。</p>
<div></div>
</body>

Nach dem Login kopieren

Ausgabeergebnis:

Was ist die zusammengesetzte Schreibmethode, um eine CSS3-Animation einmal auszuführen?

(Freigabe von Lernvideos: CSS-Video-Tutorial, HTML-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWas ist die zusammengesetzte Schreibmethode, um eine CSS3-Animation einmal auszuführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!