Tutorial zum Implementieren einer verzögerten Ausführung zwischen Schleifen mithilfe des Animationsattributs-CSS-Tutorial-php.cn

Tutorial zum Implementieren einer verzögerten Ausführung zwischen Schleifen mithilfe des Animationsattributs

零下一度

Freigeben： 2017-05-18 14:37:38

Original

3443 Leute haben es durchsucht

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

Nach dem Login kopieren

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;

Nach dem Login kopieren

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 */
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!