display: none, visibility: hidden, opacity: 0 khác nhau?

display: none: xóa khỏi layout, không chiếm không gian. visibility: hidden: ẩn nhưng vẫn chiếm không gian. opacity: 0: trong suốt, vẫn chiếm không gian VÀ nhận events. display: none truyền thống không animatable — tuy nhiên CSS @starting-style (Chrome 117+, Firefox 129+) cho phép animate từ display: none bằng transition.

display: none: removes from layout, takes up no space. visibility: hidden: invisible but still occupies space. opacity: 0: fully transparent, still occupies space AND receives pointer events. display: none traditionally cannot be animated — however, CSS @starting-style (Chrome 117+, Firefox 129+) enables animating from display: none via transition.