Javascript And CSS Animations: The Difference Between Display And Visibility

Display and visibility are two properties of style attribute which determine whether an element should appear or disappear. Although both share the same functionality but, display and visibility has important distinctions. In this post I will unveil one of the difference between display and visibility.

Here is the scenario:

The above picture produced by HTML and Javascript code, here HTML code (dv.htm):

Display mode has several possible values such as none, inline, and block. Visibility has two possible values that is visible and hidden. Setting visibility property of an element to hidden will make that element disappear but still leaving that element in document. Setting the display property of an element to none will make that element looks like just removed from the document / pulled out from the document.

To prove this concept, run the code in browser select a mode (display or visibility), move your mouse over an element inside the block then hold down ‘Ctrl’ key and click element that you want to make it disappear / invisible from document.