Wiederholen Sie die Animation alle 3 Sekunden

Question

Ich benutze WOW.js und animate.css, im Moment führe ich meine CSS zu Infinite. Ich würde gerne wissen wie kann ich meine Klasse 3 Sekunden rennen lassen und wieder anfangen bis unendlich?

Mein html:

<img src="images/fork.png" class="fork wow rubberBand" > 

Meine CSS-Klasse:

.fork { 
    position: absolute; 
    top: 38%; 
    left: 81%; 
    max-width: 110px; 
    -webkit-animation-iteration-count: infinite ; 
    -webkit-animation-delay: 5s; 

} 

Die Lösung kann in JS oder CSS3 sein.

Answer 1

Bei reinen CSS3-Animationen besteht die Möglichkeit, eine Verzögerung zwischen jeder einzelnen Iteration der Animation hinzuzufügen, um die Einstellung der Keyframes so zu ändern, dass sie die erforderliche Verzögerung erzeugen.

Im folgenden Code-Schnipsel, ist die folgende, was getan wird:

• Die gesamte Dauer der Animation 6 Sekunden sind. Um die Verzögerung zu erhalten, sollte die gesamte Dauer die Dauer sein, für die Ihre Animation tatsächlich ausgeführt wird + Zeitverzögerung. Hier läuft die Animation tatsächlich für 3s, wir brauchen eine Verzögerung von 3s und so ist die Dauer auf 6 Sekunden eingestellt.
• Für die ersten 50% der Animation (dh 3 Sekunden) passiert nichts und das Element behält seine Position im Grunde. Dadurch wird das Auftreten der Verzögerung von 3 Sekunden angezeigt.
• Für die nächsten 25% der Animation (dh 1,5 Sekunden) wird das Element mit transform: translateY(50px) um 50px nach unten verschoben.
• Für die letzten 25% der Animation (dh 1,5 Sekunden) bewegt sich das Element um 50px unter Verwendung von transform: translate(0px) (zurück zu seiner ursprünglichen Position).
• Die gesamte Animation wird unendlich oft wiederholt und jede Iteration hat eine Verzögerung von 3 Sekunden.

div{ 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid; 
 
    animation: move 6s infinite forwards; 
 
} 
 
@keyframes move{ 
 
    0% { transform: translateY(0px);} 
 
    50% { transform: translateY(0px);} 
 
    75% { transform: translateY(50px);} 
 
    100% { transform: translateY(0px);} 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<div>Some content</div>

---

Die animation-delay Eigenschaft nur für die erste Iteration eine Verzögerung einführt und kann daher nicht zwischen jeder Iteration hinzufügen Verzögerungen verwendet werden. Unten finden Sie ein Beispiel, das dies veranschaulicht.

div{ 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid; 
 
    animation: move 6s infinite forwards; 
 
    animation-delay: 3s; 
 
} 
 
@keyframes move{ 
 
    0% { transform: translateY(0px);} 
 
    50% { transform: translateY(50px);} 
 
    100% { transform: translateY(0px);} 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<div>Some content</div>

Answer 2

dir auch gefallen

html

<div class="halo halo-robford-animate"></div> 

css

body{ 
    background: black; 
} 

.halo{ 
    width: 263px; 
    height: 77px; 
    background: url('http://i.imgur.com/3M05lmj.png'); 
} 

.halo-robford-animate{ 
    animation: leaves 0.3s ease-in-out 3s infinite alternate; 
    -webkit-animation: leaves 0.3s ease-in-out 3s infinite alternate; 
    -moz-animation: leaves 0.3s ease-in-out 3s infinite alternate; 
    -o-animation: leaves 0.3s ease-in-out 3s infinite alternate; 
} 

@-webkit-keyframes leaves { 
    0% { 
     opacity: 1; 
    } 

    50% { 
     opacity: 0.5; 
    } 

    100% { 
     opacity: 1; 
    } 
} 

@-moz-keyframes leaves { 
    0% { 
     opacity: 1; 
    } 

    50% { 
     opacity: 0.5; 
    } 

    100% { 
     opacity: 1; 
    } 
} 

@-o-keyframes leaves { 
    0% { 
     opacity: 1; 
    } 

    50% { 
     opacity: 0.5; 
    } 

    100% { 
     opacity: 1; 
    } 
} 

@keyframes leaves { 
    0% { 
     opacity: 1; 
    } 

    50% { 
     opacity: 0.5 
    } 

    100% { 
     opacity: 1; 
    } 
} 

jsfiddle