javascript - Repita la animación cada 3 segundos.

css css3

Question

Estoy usando WOW.js y animate.css, en este momento estoy ejecutando mi CSS a Infinite. Me gustaría saber cómo puedo hacer que mi clase se ejecute durante 3 segundos, pare y comience nuevamente hasta el infinito.

Mi html:

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

Mi clase de CSS:

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

La solución puede estar en JS o CSS3.

Answer 1

Con animaciones CSS3 puras, una forma de agregar un retraso entre cada iteración de la animación sería modificar la configuración de los fotogramas clave para que produzcan el retraso requerido.

En el fragmento de abajo, lo siguiente es lo que se está haciendo:

• La duración total de la animación es de 6 segundos. Para tener la demora, la duración total debe ser la duración de la animación en realidad + tiempo de demora. Aquí, la animación en realidad se ejecuta durante 3 segundos, necesitamos un retraso de 3 segundos, por lo que la duración se establece en 6 segundos.
• Para el primer 50% de la animación (es decir, 3 segundos), no sucede nada y el elemento básicamente mantiene su posición. Esto da la apariencia de la demora de 3 segundos que se aplica
• Para el próximo 25% de la animación (es decir, 1,5 segundos), el elemento se mueve hacia abajo en 50 px usando transform: translateY(50px) .
• Para el 25% final de la animación (es decir, durar 1.5 segundos), el elemento se mueve hacia arriba en transform: translate(0px) usando transform: translate(0px) (de regreso a su posición original).
• Toda la animación se repite infinitas veces y cada iteración tendrá un retraso de 3 segundos.

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 propiedad de animation-delay introduce un retraso solo para la primera iteración y, por lo tanto, no puede usarse para agregar retrasos entre cada iteración. A continuación se muestra un fragmento de muestra que ilustra esto.

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

Me gusta esto

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