Как сделать анимацию при скрытии элемента без JavaScript?

Question

[slavapegaskin]

Всем привет! Есть следующий код, и он работает, но нужно сделать так чтобы скрываемый элемент удалялся из потока, а не просто становился не видимым. Если написать"display: none;" для правила с селектором "input[type="checkbox"]:not(:checked) + div" вместо "opacity: 0", то элемент скрывается (удаляется из потока) без анимации. Вопрос: "Как заставить элемент скрываться(удаляться из потока) с анимацией без применения JS?".
Код: codepen.io/slavapegaskin/pen/grLRwr
cdpn.io/grLRwr

Comments

[Дмитрий]

input[type="checkbox"]:not(:checked) + div - height: 0;

[slavapegaskin]

Дмитрий: анимация не применяется

[Дмитрий]

codepen.io/anon/pen/mPOwqE

[slavapegaskin]

Дмитрий: мне не нужно сворачивание (я отказался от него из-за того что оно не работает с процентами), а нужно плавное угасание или ещё что-нибудь работающее с относительными единицами измерения

Answer 1

[Денис Т]

input[type="checkbox"]:not(:checked) + div {
position: absolute; /*элемент выпадает из потока*/
opacity: 0;
animation: fade-out 1s;
}

как вариант

Answer 2

[Justin Bieber]

как по мне display: none; красивей, чем position: absolute;

Comments

[slavapegaskin]

при display: none не работает анимация