Свойство visibility нельзя использовать в анимации CSS, потому что оно имеет только два состояния: видимый и невидимый. 1 Браузер не может определить промежуточные состояния, поэтому переход будет резким. 2

Для реализации плавной анимации можно использовать комбинацию свойств, например, объединить visibility с opacity. 35