Forum : Animation en boucle, avec delay

Bonjour,

J'ai animé un élément, pour le faire se déplacer de gauche à droite, d'un point A à un point B.
L'animation se fait de A à B sur une seconde,
quand l'élément arrive à B, il revient instantanément à A (sans animation).
Ça fonctionne bien.

Ensuite j'ai rajouté une boucle, pour le faire 3 fois,
et j'ai aussi mis mis un 2ème élément à animer dans cette boucle.
Ça fonctionne bien.

Je montre d'abord le code :

// HTML
<div id="element_1"></div>
<div id="element_2"></div>

// CSS
div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
}

#element_1 {
    background-color: yellow;
}

#element_2 {
    background-color: orange;
    top: 150px;
}

// jQuery
var element_1 = $(' #element_1' );
var element_2 = $(' #element_2' );

function move($element, $left)
{
    $element.animate({
        left: "+=" + 100,
        }, {
        duration: 1000,
        complete: function() { // permet de revenir à la position initiale
            $element.css('left', $left);
        }
    });
}

for (var i = 0; i < 3; i++)
{
    move(element_1, element_1.css("left"));
    move(element_2, element_2.css("left"));
}

Ce que je veux

Maintenant, ce que j'aimerai, c'est faire en sorte que l'élément 2 attende 1 sec, à CHAQUE fois avant de démarrer une animation.
C'est à dire :
pause (1s)
Animation : A - B (1s)
pause (1s)
Animation : A - B (1s)
pause (1s)
Animation : A - B (1s)

J'ai essayé de le faire comme ça :

// jQuery
for (var i = 0; i < 3; i++)
{
    move(element_1, element_1.css("left"));

    setTimeout(function() {
        move(element_2, element_2.css("left"));
    }, 1000);
}

Mais ça ne fonctionne pas.

Ce que j'obtiens

pause (1s)
Animation : A - B (1s)
Animation : A - B (1s)
Animation : A - B (1s)

Je ne vois pas où/comment placer ma pause.

3 réponses

Benjamin Derepas

Réponse acceptée

... Mais pourquoi passer par du js pour faire une animation si simple ? Il faut savoir qu'une anim en js prendra beaucoup plus de ressources qu'en css basique. C'est pas pour rien que les fonctions animations et keyframe en css existent ^^
Coté css, si tu regarde la documentation autour des animations tu trouvera ton bonheur .
Dans ton cas tu dois jouer avec animation-delay .

N'oublis pas que avec les nouvelles fonctionnalités de css3, les surcouches js sont inutiles. Il vaut mieux privilegié d'ailleurs le css, language qui sera toujours chargé, au js, qui peut être désactivé.

SLK

Auteur

Ah ben oui, c'est vrai qu'on peut boucler facilement...
animation-iteration-count infinite
J'espère que je peux vraiment faire un delay à chaque itération de boucle.

Mince je n'avais même pas pensé à essayer de le faire en CSS.
Quand on bloque on est têtu ! ^^
J'essaierai ça demain, là je vais pas tarder à dormir.

pourquoi passer par du js pour faire une animation si simple ?
En vérité ce que je fais c'est déplacer l'élément hors écran au début, le déplacer sur une oblique, avec en même temps une rotation, attendre un peu après la sortie de l'écran, et recommencer, tout ça de façon automatique, sans interaction avec l'utilisateur.
Là pour le forum j'ai simplifié pour qu'on se concentre sur ce qui coince.
Comme je devais lancer tout ça sans interaction je me suis senti obligé de passer par du js, mais c'est vrai qu'il y a les KeyFrames bon sang !
Bon alors je pense que le tout devrait fonctionner en CSS effectivement tu as raison.
J'ai un léger doute sur le delay à chaque itération, j'espère que ça ira.

Je viendrai dire si j'ai réussi ou pas.

Merci.

SLK

Auteur

Ah d'accord !

Bon sang je n'aurai pas trouvé tout seul.
Merci Advancid.

Bon du coup, comme me l'a conseillé Benjamin Derepas, je l'ai fais en CSS.
Et j'ai eu un souci,
le délai de l'animation ne fonctionne QU'AVANT de lancer l'animation, le délai n'est PAS répété à chaque itération.
J'ai utilisé une astuce pour simuler un délai :

// HTML
<div id="element_1"></div>
<div id="element_2"></div>
<div id="element_3"></div>

// CSS
@keyframes moving1 {
    0% {
        left: 0;
    }
    100% {
        left: 100px;
    }
}

/*  l'élément 2 bouge en 1sec (dividende),
    si je veux attendre 1sec, ça fera 2sec (diviseur) en tout,
    1 / 2 = 0.5  -->  50%    
*/
@keyframes moving2 {
    0% {
        left: 0;
    }
    50%, 100% {
        left: 100px;
    }
}

/*  l'élément 3 bouge en 1sec (dividende),
    si je veux attendre 2sec, ça fera 3sec (diviseur) en tout,
    1 / 3 = 0.33  -->  33%    
*/
@keyframes moving3 {
    0% {
        left: 0;
    }
    33%, 100% {
        left: 100px;
    }
}

div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
}

#element_1 {
    background-color: yellow;
    -moz-animation:     moving1 1s linear infinite;
    -webkit-animation:  moving1 1s linear infinite;
    animation:          moving1 1s linear infinite;
}

#element_2 {
    background-color: orange;
    top: 150px;
    -moz-animation:     moving2 2s linear infinite;
    -webkit-animation:  moving2 2s linear infinite;
    animation:          moving2 2s linear infinite;
}

#element_3 {
    background-color: red;
    top: 300px;
    -moz-animation:     moving3 3s linear infinite;
    -webkit-animation:  moving3 3s linear infinite;
    animation:          moving3 3s linear infinite;
}