18100 sujets

Questions générales et questions de débutants

Transition: opacity

Bonjour, Smiley biggrin

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 ! Smiley smile

En fait, ta transition marche Smiley langue 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/
Sujet clos
Aller à