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
Message édité par MaybeEijOrNot le 14-04-2020 à 16:26:03
---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.