Discussion :

[domi65]

Bonjour.
Question toute bête mais à laquelle je ne trouve pas de réponse sur le web :
Comment faire démarrer une transition ou une animation CSS par un événement JS, par exemple au clic sur un bouton.
Merci.

[amateurprg]

Salut

Par un click, alors ça veut dire que c'est du js qui va lancer l'anim css, y a que ça.
Style une boucle d'animation et tu change à l'intérieur de la boucle le css d'un élément à animer .

Ou alors j'ai pas compris ton probleme ?

[domi65]

Ou alors j'ai pas compris ton probleme ?

J'ai du mal m'exprimer.

Je veux un truc dans le genre <button onclick="demarrerAnim()">Démarrer l'animation</button> et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function demarrerAnim() {
  // quelque chose, mais quoi, qui démarre la transition ou l'animation déclarée dans le CSS 
}

[amateurprg]

Tu dois mettre en pause ton animation.

animation-play-state: paused;

Puis la lancer avec :

animation-play-state: running;

Tu peux en démarrer/pauser plusieurs :

animation-play-state: paused, running, running;

[domi65]

Puis la lancer avec : animation-play-state: running;

Ok, une instruction du genre :

monElt.style.animationPlayState = 'running' ?

Merci, super, j'm'en vas essayer ça !

[domi65]

Tu dois mettre en pause ton animation.

Ta façon de faire fonctionne bien pour une animation.
Serais-tu comment faire avec une transition des fois ? (Ouaip, je sais, je suis exigeant).
Merci.

[Invité]

Bonjour,

Merci de montrer ton code.