@keyframe, callback ou enchainement

Par Laznet, il y a 8 ans

Les bases HTML/CSS

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
Mes trois points

13 réponses

JeremieMeunier, il y a 8 ans

Perso je laisserais les keyframes pour chaque animation !

Laznet, il y a 8 ans

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, il y a 8 ans

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, il y a 8 ans

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, il y a 8 ans

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

Laznet, il y a 8 ans

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

Laznet, il y a 8 ans

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

Laznet, il y a 8 ans

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, il y a 8 ans

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

Laznet, il y a 8 ans

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.