Transition: opacity

Bonjour,

Juste une petite question :
pourquoi mon animation d'opacité ne fonctionne pas à la fermeture de mon container ?
demo

#rotate {
    opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

Merci

Hello !

En fait, ta transition marche Le problème, c'est que tu appliques un délais de 0.5s sur la transition de la propriété visibility. Donc en gros, d'abord l'opacité change pendant 0.5s et seulement après, la visibilité change.

À noter qu'il est inutile d'appliquer des transitions sur les propriétés visibility et display (il me semble), puisque les transitions n'ont pas d'effet dessus. Si tu veux faire un effet de fade in, c'est juste opacity qu'il faut animer.

Plus d'infos sur les transitions CSS : http://css-tricks.com/almanac/properties/t/transition/

merci je regarde tout ça !