Ripeti animazione ogni 3 secondi

Question

Sto usando WOW.js e animate.css, in questo momento sto eseguendo il mio CSS su Infinite. Vorrei sapere come posso far funzionare la mia lezione per 3 secondi e ricominciare all'infinito?

mio html:

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

La mia classe CSS:

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

} 

La soluzione può essere in JS o CSS3.

Answer 1

Con le animazioni CSS3 pure, un modo per aggiungere un ritardo tra ogni singola iterazione dell'animazione consiste nel modificare l'impostazione dei fotogrammi chiave in modo che producano il ritardo richiesto.

Nel frammento di sotto, il seguente è cosa viene fatto:

• L'intera durata dell'animazione è di 6 secondi. Per avere il ritardo, l'intera durata dovrebbe essere la durata per la quale l'animazione viene effettivamente eseguita + tempo di ritardo. Qui, l'animazione viene effettivamente eseguita per 3 secondi, abbiamo bisogno di un ritardo di 3 secondi e quindi la durata è impostata su 6 secondi.
• Per il primo 50% dell'animazione (ovvero 3 secondi), non accade nulla e l'elemento mantiene sostanzialmente la sua posizione. Questo dà l'aspetto del ritardo di 3 secondi applicato
• Per il 25% successivo dell'animazione (ovvero 1,5 secondi) l'elemento si sposta di 50 px utilizzando transform: translateY(50px).
• Per il 25% finale dell'animazione (ovvero, ultimi 1,5 secondi) l'elemento si sposta di 50 px utilizzando transform: translate(0px) (torna alla sua posizione originale).
• L'intera animazione viene ripetuta un numero infinito di volte e ogni iterazione avrà un ritardo di 3 secondi.

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>

---

La struttura animation-delay introduce un ritardo solo per la prima iterazione e quindi non può essere utilizzata per aggiungere ritardi tra ogni iterazione. Di seguito è riportato uno snippet di esempio che illustra questo.

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

risultati simili

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