La différence entre les 3 propriétés CSS

display: none; 
visibility : hidden;
opacity: 0;

display none

display none supprime le bloc du dom, il n’est plus reconnu par le navigateur, pas lu par les lecteurs d’écrans.

display: none; 

Visiblility hidden

Masque le bloc pour le navigateur, mais il conserve sa taille dans le dom, pas selectionnable, pas lu par les lecteurs d’écrans.

visibility: hidden; 

Opacity 0

changes juste l’opacité du bloc il garde toutes ces propriétés, il est juste transparent.

Pratique pour faire des animations, car on peut facilement manipuler opacitiy avec les transitions CSS.

opacity: 0; 

Demo:

https://codepen.io/6clicks/pen/qBMJOZQ