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

Question

I am confused with these three terms which are used in CSS. What is different between Opacity, Visibility and Display in CSS?

Answer 1

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