Visibility & Opacity

Two ways to hide elements:

• visibility:hidden – element is invisible but still occupies space and is read by screen readers.
• opacity:0 – element is fully transparent but still participates in layout and events.

Both are useful for animation start‑states.

---

Example: Fade‑in transition

.hidden { opacity:0; transition:opacity .3s ease; }
.visible { opacity:1; }