Тогглер анимации элемента

Я уже час пытаюсь починить тогглер анимации элемента. Его суть просто вопспроизвести CSS анимацию в обе стороны: для открытия и закрытия блока, с последующим его срытием (displa: none или visibility: hidden без разницы).

Анимация выглядит следующим образом:

$('.modal').toggleClass("modal-active");

.modal { 
    display: table; 
    position: fixed; 
    top: 0; 
    left: 0; 
    background: rgba(0,0,0,0.7); 
} 
.modal>div { 
    display: table-cell; 
    vertical-align: middle; 
} 
.modal>div>div { 
    margin-bottom: 2em; 
} 
.modal>div>div, .modal { 
    transition: opacity, margin-bottom 0.4s; 
    opacity: 0; 
} 
.modal-active { 
    opacity: 1; 
} 
.modal-active>div>div { 
    opacity: 1; 
    margin-bottom: 0; 
}

Тут по сути просто прозрачность с 0 до 1 и небольшой сдвиг блока сверху margin'ом.

Я видел варианты проиграть анимацию реверсивно, но я не пойму пока сделает ли это работу с ней удобнее, пока нет. В основном проблема в том что в одну из сторон блок пропадает сразу, так есть visibility: hidden срабатывает раньше. Я мог бы это исправить неудобными методами типа setTimeout но хотелось бы больше гибкости и меньше кода, если это реально.

Есть какой-либо вариант реализовать это без трекинга окончания анимации(или чего подобного) с просто toggleClass, то есть на CSS?