Как сделать разные переходы для In и Out?

Question

[thirteen_bit]

Приветствую! Есть ли способ без шаманства над классами организовать transition out, отличный от transition in? Фиддл здесь: https://jsfiddle.net/starostyants/z4n5g2jm/10/

А именно: opacity: 0, без возвращения блока к top: -7px;

Comments

[Ankhena]

@keyframes сначала сделать ему opacity: 0, например, на 95%, а потом top: -7px на 100, потому что вернуться-то назад ему всё-таки нужно, чтобы оттуда можно было начать заново.

Answer 1

[Сергей delphinpro]

примерно так https://jsfiddle.net/xka2y6g9/
только наоборот

Answer 2

[thirteen_bit]

Вдохновившись идеей устанавливать значения transition для каждого состояния, решил поиграться с параметрами и пришел к такому решению: https://jsfiddle.net/starostyants/z4n5g2jm/40/