How to make an animation when an element is hidden without JavaScript?

Question

css

Hello! There is the following code , and it works, but you need to make sure that the hidden element is removed from the stream, and not just becomes invisible. If you write "display: none;" for a rule with the selector "input[type="checkbox"]:not(:checked) + div" instead of "opacity: 0", the element is hidden (removed from the flow) without animation. Question: "How to make an element hide (remove from the flow) with animation without using JS?".
Code: codepen.io/slavapegaskin/pen/grLRwr
cdpn.io/grLRwr

Answer 1

input[type="checkbox"]:not(:checked) + div {
position: absolute; /*element drops out of flow*/
opacity: 0;
animation: fade-out 1s;
}
as an option

Answer 2

as for me display: none; prettier than position: absolute;