Bonjour !
 
J'ai une petite jauge en SVG et CSS qui se "remplit" avec une animation sur 5 secondes. J'aimerais qu'en cas d'annulation de la part de l'utilisateur, cette jauge se "vide" mais à partir de la position courante et non de la position finale de la jauge. Je ne sais pas comment m'y prendre...
 
Vous auriez une idée ? Merci !

ca peut aider : https://css-tricks.com/controlling- [...] avascript/

Pas évident, faut créer deux animations, une dans le sens aller et l'autre dans le sens retour. En effet, le changement de sens ne peut se faire qu'au niveau d'une keyframe, or nous n'en avons que 2 (début et fin) donc on ne peut pas utiliser toute la puissance des animations CSS.
Pour le sens retour, il faut définir une keyframe de largeur de départ qui correspond à la largeur finale d'où aura été stoppée l'animation dans le sens aller. Pour cela il faut utiliser une variable css qu'on vient modifier quand on stoppe la progression de la barre (sens aller) en lui donnant la valeur de la largeur que mesure l'élément à ce moment là.
Il ne reste plus qu'à alors attribuer la nouvelle animation au lieu de l'ancienne.

https://codepen.io/Perrier_ChouFleur/pen/qBOOPPK

Merci de vos réponses !
 
J'étais également arrivé à la conclusion qu'il me fallait 2 anims et une variable mais chez moi, les variables ne passaient pas : le code de Eij est astucieux mais je ne peux pas utiliser width car ma jauge est un arc de cercle SVG (*) et pour tout dire, j'étais arrivé à la conclusion que je n'avais pas accès aux variables dans les keyframes... C'est peut-être mon code qui est en cause (le SVG est décrit dans le HTML mais avec des defs de CSS). Je vais élaguer un peu et reprendre tout ça. Merci encore,
 

Comment elle fonctionne ta jauge ?

https://jsfiddle.net/ABB_2020/4oceu5w8/1/
 
Désolé du temps mis à te répondre, j'étais parti sur d'autres trucs et je n'ai plus la version à l'origine de la question...

Une solution consiste à faire deux animations en même temps, une sur ton bouton, et une autre cachée qui va servir à faire les mesures : https://jsfiddle.net/ty6281dw/
Les deux animations doivent être calibrées de la même manière, simplement, celle qui est cachée va faire évoluer des propriétés qu'on peut observer (ici la largeur d'un élément caché et ne pas oublier le temps écoulé qui peut être calculé par rapport à cette largeur).
Quand on arrête l'animation on peut ainsi récupérer les valeurs qu'on passe au CSS par JS via les variables CSS, on peut ainsi relancer une autre animation à partir du point d'arrêt.

Brillant, le coup de l'anim cachée, bravo ! Et merci !
T'as carrément gagné ta binouze, là...

Tu peux faire sans je pense, en mesurant le temps que dure tes animations, mais le fait d'ajouter une animation cachée permet d'avoir une plus grande portée et une accessibilité plus simple.
 
Bon après il reste peut-être pas mal de travail pour tout synchroniser avec ce que tu veux faire mais tu as une bonne base je pense maintenant.