Does Opacity:0 Have Exactly the Same Effect as Visibility:Hidden

Does opacity:0 have exactly the same effect as visibility:hidden

Here is a compilation of verified information from the various answers.

Each of these CSS properties is unique. In addition to rendering an element not visible, they have the following additional effect(s):

1. Collapses the space that the element would normally occupy
2. Responds to events (e.g., click, keypress)
3. Participates in the taborder

                     collapse events taborder
opacity: 0              No     Yes     Yes
visibility: hidden      No     No      No
visibility: collapse   Yes*    No      No
display: none          Yes     No      No

* Yes inside a table element, otherwise No.

visibility:hidden vs display:none vs opacity:0

The answer found here will answer your first question (most likely display:none as the space is collapsed completely).

To your second question, tools such as this will probably be useful for you. However 40,000 divs sounds like way too many and you will probably have better performance using canvas or SVG (for example, using the KineticJS library as this handles animations - transformation, rotation, scale, etc.) for you.

Within CSS what is the difference between opacity:0 and display:none?

display: none lets the element disappear. Just like it isn't present. This means your layout may change.

opacity: 0 this one just makes your element invisible. It doesn't take any effect on your layout.

What is different between Opacity, Visibility and Display in css?

Display:

• Can't be read by screenreaders. If you put display: none on your body tag, your page will never popup in the Google result, because Google sees it as a blank page.
• height = 0
• width = 0
• animatable: no

Visibility:

• Can be read by screenreaders. If you put visibility: hidden on your body tag, your page will popup in the Google result, but a visitor will just see a blank page
• height = initial;
• width = initial;
• animatable: no

Opacity:

• Can be read by screenreaders. If you put opacity: 0 on your body tag, your page popup will in the Google result, but a visitor will just see a blank page;
• height = initial;
• width = initial;
• animatable: yes

visibility: hidden; AFTER opacity: 0;

If the object should not be there, use .fadeOut(1000) instead.

CSS3 Element with Opacity:0 (invisible) responds to mouse events

If you're setting your div to have an opacity of zero, you're still going to be able to interact with the "invisible" item. You want to set it to display:none instead. You could do both, allowing the div to fade out to zero and then tack on the display:none when the animation has finished.

What is the difference between visibility: hidden and transform: scale(0,0)?

If you set the visibility of an element to hidden it is hidden but still takes up space.

If you set the visiblity to collapse it will not take up space and will behave the same as display:none. But collapse can only be used on table elements.

transform: scale(0,0) will just set the size to 0,0 meaning css properties like float or clear will still take affect on other elements.

When an element with infinite keyframes animation is hidden via opacity: 0, will PC's resources still be spent on rendering it?

yes they will. Opacity 0 is still in the render tree so will use more resourses than say:

• display: none which will remove the element from the render tree completely
• visibility: hidden which will calculate base properties with width, height, but not actually render it

display is generally better unless reflow becomes an issue in which case visibility will often be quicker.

Please note that there are also lots of similar questions to this like the below which are worth checking out in the future else you'll keep getting down-voted.
opacity vs visibility

visibility vs display
also bear in mind that opacity: 0 is still in the event and tab models unlike the other 2.

---

Related Topics