Very usefull property. I've used it on many projects.

Answer 1

The 'visibility' property is a way to set the 'opacity' property to value zero or one: on css animation/transition, the behaviour of setting one or other is strictly the same ;) (opacity range is a float between zero and one included ^^)

Answer 2

The visibility Property

The visibility property specifies whether an element is visible or hidden. The most common values are visible and hidden.

Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results:
visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but it will still affect the layout.
↑ (?)
Source : Sololearn