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:383367Durchsuche

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-direction

Standardwert: 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 Animation

3. 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!

Stellungnahme：

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

Vorheriger Artikel：Ausführliche Erläuterung der beiden Pausenmethoden (Übergang, Animation) in CSS3Nächster Artikel：Ausführliche Erläuterung der beiden Pausenmethoden (Übergang, Animation) in CSS3

In Verbindung stehende Artikel

Mehr sehen