Wie verzögert man die unendliche Klasse in animate.css?

Question

Ich verwende https://daneden.github.io/animate.css/, um eine CSS-Animation zu erstellen. Ich verwende derzeit die unendliche Klasse, um sie zu wiederholen. Aber ich möchte, dass es sich alle 5 Sekunden statt jeder Sekunde wiederholt. Gibt es eine Möglichkeit, dies mit CSS oder jQuery zu tun?

Hier ist mein Code:

<div class="row"> 
       <div class="col-12 name animated infinite zoomIn"> 
        <h1>vicki williams</h1> 
       </div> 
      </div> 

Answer 1

Es in the docs ist, mein Freund:

#yourElement { 
    -vendor-animation-duration: 3s; 
    -vendor-animation-delay: 2s; 
    -vendor-animation-iteration-count: infinite; 
} 

Answer 2

Sicher, wenn Sie Ihre Animation wollen einstellen alle 5 Sekunden wiederholen, die animation-iteration-count zu infinite und stellen Sie die animation-duration auf einen Wert, der die Dauer der Animation so lange umfasst, wie Sie möchten, und fügen Sie dann die 5 Sekunden Verzögerung hinzu. Im Beispiel unten setzt animation: color 6s infinite; die Animation auf 6s, und in meiner Animation verblasse ich von Schwarz zu Rot bis zu 17% (1s), dann zurück zu Zurück sofort und durch den Rest der Animation (5s), dann wiederholt es sich. Das ist eine Möglichkeit, in 1s von Schwarz auf Rot zu übergehen, das Zurücksetzen durchzuführen und eine 5s Verzögerung zu haben, dann wiederholt sich die Animation.

h1 { 
 
    animation: color 6s infinite; 
 
} 
 

 
@keyframes color { 
 
    0% { 
 
    color: black; 
 
    } 
 
    17% { 
 
    color: red; 
 
    } 
 
    18% { 
 
    color: black; 
 
    } 
 
}

<h1>hello</h1>