display:none removes the layout element from the page. But you can still continue to manipulate it in the DOM.

visibility:hidden no longer shows the element, ie it is no longer visible on the page but its space is still occupied, ie the layout of the page does not change because of this. It's like you put out a light there but the lamp is still there.

1. <span style="display: none;">texto escondido</span> teste.
2. <span style="visibility: hidden;">texto escondido</span> teste.
3. <span style="opacity: 0;">texto escondido</span> teste.

The hidden resembles opacity:0 . The difference is that the latter responds to handler events .

Performance

Given the comment of Zuul I would say that the difference in performance is ridiculous and should not be taken into account. If you measure the use of display: none it would have a performance gain since it prevents the element from being rendered and it is obvious that this saves time when mounting render tree . display: none will probably cause a new rendering on most of the tree while visibility: hidden will only render the location of this element without interfering with the whole tree.

Just as we always say in programming that you must do what needs to be done in a readable way, do not worry about performance. Then choose which one gives the expected result.

As we are talking about visual elements a lot of performance can become a problem for the eyes in some situations where there are many changes in layout .

But if you have a very complex animation where performance can really affect, you're probably using the wrong tool. Do not forget that HTML is a document. You can even do something more sophisticated with it, but use the canvas or a SVG might be a better idea from a point.

The main difference is that visibility holds the space that the element occupies on the page and display: none; does not, that is, other elements can take its place.

The visibility: hidden; is more like opacity: 0; (the latter allows different layers of visibility / opacity).

Both visibility: hidden; and display: none; do not respond to event handlers, whereas opacity allows event handlers to be called.

Example:

$('div').eq(0).css('opacity', 0);
$('div').eq(1).css('visibility', 'hidden');
$('div').eq(2).css('display', 'none');

$('div:not(:eq(3))').click(function(){
    $('div').eq(3).find('span').html(this.innerHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>Teste 1</div>
<div>Teste 2</div>
<div>Teste 3</div>
<div>Clicou no elemento: <span></span></div>

If I do not lack memory, display:none removes the element from the DOM layer, visibility:hidden is the same as opacity:0 , only leaves the element invisible.

In addition to what has already been answered (about page space, and events), it is worth remembering that display:none; , by removing the element from the DOM context, prevents the resources used in the element from being loaded into memory. (eg Images, fonts, etc ...) Although the external content is downloaded to the client machine, the browser does not render content, and it is not loaded into memory ...

With visibility: hidden; , the hiding is only visual, and all content is still being rendered by the browser.