Heim > Artikel > Web-Frontend > Tutorial zum Implementieren einer verzögerten Ausführung zwischen Schleifen mithilfe des Animationsattributs
Tutorial zum Implementieren einer verzögerten Ausführung zwischen Schleifen mithilfe des Animationsattributs
- 零下一度Original
- 2017-05-18 14:37:383427Durchsuche
Stellen Sie zunächst die Definition und Verwendung von Animationen vor
Das Animationsattribut ist ein abgekürztes Attribut, mit dem sechs Animationsattribute festgelegt werden:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-directionStandardwert: keine 0 Leichtigkeit 0 1 normal
Hinweis: Bitte geben Sie immer das Attribut „animation-duration“ an, andernfalls ist die Dauer 0 und die Animation wird nicht abgespielt.
Syntax
animation: name duration timing-function delay iteration-count direction;
animation-name gibt den Keyframe-Namen an, der an den Selektor gebunden werden muss. .
animation-duration Gibt die Zeit an, die zum Abschließen der Animation benötigt wird, in Sekunden oder Millisekunden.
animation-timing-function gibt die Geschwindigkeitskurve der Animation an.
animation-delay Gibt die Verzögerung an, bevor die Animation startet.
animation-iteration-count Gibt an, wie oft die Animation abgespielt werden soll. (Wert: n-mal, Endlosschleife)
animation-direction Gibt an, ob die Animation der Reihe nach rückwärts abgespielt werden soll.
Zusammenfassung:
Basierend auf den oben genannten Attributen müssen Sie nur die Animationsverzögerung und die Anzahl der Animationsiterationen entsprechend der spezifischen Situation festlegen.
Zum Beispiel:
p
{
animation:mymove 5s 5s infinite;
-webkit-animation:mymove 5s 5s infinite; /* Safari 和 Chrome */
}Lösungsbeispiel:
<!doctype html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.item1{
list-style: none;
-webkit-animation: revolving 4s 0s infinite;
animation: revolving 4s 0s infinite;
}
@-webkit-keyframes revolving{
0,75%{
-webkit-transform: perspective(700px) rotateX(90deg);
}
87.5%{
-webkit-transform: perspective(700px) rotateX(0deg);
}
100%{
-webkit-transform: perspective(700px) rotateX(-90deg);
}
}
</style>
</head>
<body>
<ul>
<li class="item1">梅西与美洲杯失之交臂</li>
</ul>
</body>
</html>Stellen Sie die Gesamtanimation auf 4 Sekunden ein, und dann sind die ersten 75 % 3 Sekunden . Ändern (0-75 %), die nächsten 25 % sind nur 1 Sekunde lang zu animieren.
[Verwandte Empfehlungen]
1. Detaillierte Einführung in die Animationsrichtungseigenschaft in CSS3
2. Muss CSS3-Animation beherrschen ( Die 8 Hauptattribute der Animation3. Geben Sie ein Beispiel für die Überwachung des Endereignisses der CSS3-Animation (Animation)
4 Erklärung zweier Arten von Pausen in der CSS3-Methode (Übergang, Animation)
Das obige ist der detaillierte Inhalt vonTutorial zum Implementieren einer verzögerten Ausführung zwischen Schleifen mithilfe des Animationsattributs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!