Forum : @keyframe, callback ou enchainement

Bonsoir,

J'essaye de réaliser une animation assez complexe, j'ai trois points, l'un à côté de l'autre, j'aimerais que chacun saute l'un après l'autre ( quelques explications me semble nécessaire : le premier saute, il redescend, le deuxième saute, il redescend, le troisième saute, il redescend et on retourne au début).

Et c'est là que je me suis mis à chercher comment faire en sorte que chaque animations s'enchaine, j'utilise une animation pour chaque point.. peut être pas la meilleur méthode pour faire ce que je veux, je vous laisse me dire ce que vous en pensez.

j'ai donc cherché comment faire des callbacks en CSS (oui, j'ai pensé l'espace d'un instant que ce serait possible xD), ou comment mettre mes keyframes l'un dans l'autre pour qu'il s'enchaine.
Et ce n'est pas possible, j'aimerais donc savoir comment vous feriez ? (Si possible sans librairie, et si il y a du JS à utiliser de préférence un truc avec jQuery).

Mes trois points

JeremieMeunier

Réponse acceptée

Perso je laisserais les keyframes pour chaque animation !

Laznet

Auteur

Réponse acceptée

Au final, j'ai utilisé trois points différents, (bon le code n'est pas ultra optimisé j'avoue.. mais ça fait le taff).

.point{
    background-color: #fff;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    margin: 4px;
}

    .point_1{
        animation-name: point_one;
        animation-duration: 800ms;
        animation-timing-function: step-start;
        animation-delay: 50ms;
        animation-iteration-count: infinite;
        animation-direction: normal;
    }

    .point_2{
        animation-name: point_two;
        animation-timing-function: steps(2);
        animation-iteration-count: infinite;
        animation-direction: normal;
        animation-duration: 800ms;
        animation-delay: 50ms;
    }

    .point_3{
        animation-name: point_tree;
        animation-timing-function: step-end;
        animation-iteration-count: infinite;
        animation-direction: normal;
        animation-duration: 800ms;
        animation-delay: 50ms;
    }

@keyframes point_one{
    0%{
        transform: translateY(0);
        transition: all 0.6s;
    }

    50%{
        transform: translateY(-20px);
        transition: all 0.6s;
    }

    100%{
        transform: translateY(0);
        transition: all 0.6s;
    }
}

@keyframes point_two{
    0%{
        transform: translateY(0);
        transition: all 0.6s;
    }

    50%{
        transform: translateY(-20px);
        transition: all 0.6s;
    }

    100%{
        transform: translateY(0);
        transition: all 0.6s;
    }
}

@keyframes point_tree{
    0%{
        transform: translateY(0);
        transition: all 0.6s;
    }

    50%{
        transform: translateY(-20px);
        transition: all 0.6s;
    }

    100%{
        transform: translateY(0);
        transition: all 0.6s;
    }}

La démo

JeremieMeunier

Réponse acceptée

Si tu regarde encore un peu le sujet j'ai perfectionner ton loader !

StanislasP

Réponse acceptée

Ok, voila le jsfiddle https://jsfiddle.net/3darjnm2/

Laznet

Auteur

Sauf que je ne sais pas comment faire pour que ça s'enchaine quand même.

genre mettre un temps avant que ça commence. (sinon elle démarre toute en même temps et c'est la merde xd)

JeremieMeunier

Faut que tu organise avec le moment de départ !

@keyframes anim1 {
    0%      { /* Position du premier au départ */ }
}
@keyframes anim2 {
    0%      { /* Position du premier au départ */ }
}
@keyframes anim3 {
    0%      { /* Position du premier au départ */ }
}
@keyframes anim4 {
    0%      { /* Position du premier au départ */ }
}

Laznet

Auteur

Merci beaucoup :D, c'est sûr que c'est plus fluide comme ça :D

StanislasP

Tu peux faire aussi d'autre animation tel que cette autre possibilité https://codepen.io/anon/pen/jLvdzx :)

Laznet

Auteur

Normal que je n'arrive pas à charger ton animation ? ça met loading.... et ça recharge la page.

StanislasP

Normalement non, c'est directement dans codepen.

je remet le lien pour le cas ou.
https://codepen.io/anon/pen/jLvdzx

Laznet

Auteur

J'ai toujours le même problème xD, ça m'affiche loading.... dans l'espace où la démo devrait s'afficher... et ça recharge la page. Essayes dans un jSfiddle peut être ?

Laznet

Auteur

Ça fonctionne xD, ouais c'est sûr, c'est aussi une bonne idée :D

Laznet

Auteur

Je suis content que ça puisse servir à d'autre :D. Si vous avez codé par le passé des animations de ce style (ou d'autre d'ailleurs) n'hésitez par à les mettres pour que ça puisse servir à d'autre dans le besoin :D.

@keyframe, callback ou enchainement

13 réponses