Есть ли альтернативный способ для такой анимации?

Question

[romaro]

Можно ли сделать такую же анимацию, но для свойства visibility? То есть чтобы оверлей соскальзывал сверху, но при этом его начальное позиционирование было бы top 0 0?

Answer 1

[Mark Lansky]

Само свойство visibility анимировать невозможно, также как и display и прочие "дискретные" свойства.
Но чтобы реализовать плавную анимацию например исчезновения (и чтобы в конце анимации было выставлено visibility: hidden;) можно использовать например анимации @keyframes

@keyframes hide {
    0% {
        opacity: 1;
        visibility: visible;
    }

    99% {
        opacity: 0;
        visibility: visible;
    }

    100% {
        opacity:0;
        visibility: hidden;
    }
}

Это самое быстрое решение, которое я придумал. Но правильнее скорее всего будет через js слушать окончание анимации и вешать класс, который будет применять нужные стили