Augmenter la durée d'une animation

Bonjour , j'ai un dé très sympa , mais je souhaiterais le faire rouler un peu plus avant de s'arrêter sur sa face .

j'ai tenté un transforme rotate avant le lancé mais ça ne fonctionne pas (ou alors qu'au 1er lancé).

voici le fiddle

https://jsfiddle.net/Lrgy96a8/

si quelqu'un a une idée je prends .

Merci d'avance

Bonjour,
Très pratique le jsfidle :)

Pour résumé j'ai fait trois petit changement :
- CSS, ajout d'une classe qui fait rouler le Dé
- Js : Ajout de la classe puis suppression au bout de x secondes

Dans le css tu règle la vitesse pour faire rouler le dé , augmente la durée = baisse de la vitesse.
Sinon tu peux aussi changer les rotates, j'ai juste pris les valeurs pour une face ( Dé 4 x=720 / y=810 ) que j'ai multiplié par 4. C'est pas obligé franchement, tu peux mettre ce que tu veux je pense

Code:

---

1 2 3 4 5

.spinning { transition: transform 1.5s ease-in-out !important; transform: translateZ(-100px) rotateY(3240deg) rotateX(2880deg) !important; }

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

$("#spin").click(function(e) { e.preventDefault(); document.getElementById("dice").classList.add("spinning");   rnd = Math.floor(Math.random() * 6 + 1); let x, y; switch (rnd) { case 1: x = 720; y = 810; break; case 6: x = 720; y = 990; break; default: x = 720 + (6 - rnd) * 90; y = 900; break; } setTimeout(function() { document.getElementById("dice").classList.remove("spinning"); }, 1000); // Durée de la transition $(".dice").css( "transform", "translateZ(-100px) rotateY(" + x + "deg) rotateX(" + y + "deg)" ); });

---

Cdt,

ce qui est surtout très pratique et très sympa ce sont les gens qui prennent le temps de répondre .
Merci beaucoup donc pour ta réponse , effectivement la création d'une classe d'animation css et son activation en js est évidente une fois qu'on a lu ta proposition....
merci encore

Tant que ca te convient it's good, pas de quoi :).

Tu peux le faire sans class aussi, c'est ce qui est bien avec js , tant que tu as de l'inspi tu peux bidouiller
Oublie pas de cliquer sur :resolu: si jamais ton problème est réglé :mouarf:

Bonjour,

Citation:

---

Envoyé par gabi7756

- Js : Ajout de la classe puis suppression au bout de x secondes

---

il existe une façon élégante de faire cela et sans utiliser l'approximatif setTimeout, c'est d'utiliser l'événement transitionend déclenché en fin de transition. On a donc une « parfaite » synchronisation.

Code:

---

1 2 3 4 5

const elDice = document.getElementById("dice"); elDice.ontransitionend = (e) => { console.log("transition terminée après %fs", e.elapsedTime); } // le code déclencheur

---

Ressource :

Document: évènement transitionend