[Résolu] Transition fade-out très brutale

Bonjour à tous,
Je déterre un sujet que j'avais lancé il y a deux ans :
https://forum.alsacreations.com/topic-4-90031-1-Resolu-Opacite-et-transition.html
J'avais mis "résolu" car j'avais pensé m'en sortir, mais...
Pour faire court, pourquoi mon fade-out se termine brutalement :
https://jsfiddle.net/herde2/2pn0fv4c/11/
Et non pas comme il le faudrait (parfait exemple de pitet ci-dessous) :
https://jsfiddle.net/zhsy7wv1/
Je pensais le souci idiot mais...
Merci et bonne journée,
P.

Salut drphilgood
Si ma mémoire est bonne (c'est vieux tout ça), le ménage n'avait simplement pas été fait. J'avais laissé des effets non nécessaires pour le topic. Honte à moi... ce qui ne veut pas dire qu'il n'y en a pas énormément trop de toutes façons, comme ce "visibility" qui me gâchait la vie.
Ça paraît simple pourtant maintenant Merci énormément.
Bonne journée,
P.

Bonsoir,

Intéressant ce sujet. En réaction à ceci :

drphilgood a écrit :
de plus tu cumule opacity et visibility, çà peut pas

Si si, on peut ; voici ma petite participation :

.fade-in-out {
  transition: opacity 1s ease-in;
  
  &:hover {
    visibility: hidden;
    opacity: 0;
    transform: scale(0);
    transition: opacity 1s ease-out, visibility 0s 1s ease-out, transform 0s 1s ease-out;
  }
}

Test en ligne : CodePen, fade-in-out