Само свойство visibility анимировать невозможно, также как и display и прочие "дискретные" свойства.
Но чтобы реализовать плавную анимацию например исчезновения (и чтобы в конце анимации было выставлено visibility: hidden;) можно использовать например анимации @keyframes
@keyframes hide {
0% {
opacity: 1;
visibility: visible;
}
99% {
opacity: 0;
visibility: visible;
}
100% {
opacity:0;
visibility: hidden;
}
}
Это самое быстрое решение, которое я придумал. Но правильнее скорее всего будет через js слушать окончание анимации и вешать класс, который будет применять нужные стили
