How to connect animation to block hiding?

Question

css

Hello. There is a switch, it is also a checkbox, by clicking on which a block with text and animation pops up (animate.css). Switching back hides this block. How to do. in order for the hide to be animated, that is, you need to add a class, for example animated fadeOutUp. I ask for your help.

Answer 1

Do not use display:block\none. Since css animation will not be applied to.
Of the options:

1. Use jQuery (IMHO, not worth dragging it around just for this)
   
2. Make a state transition
   
3. Fully describe animation in JS (There are experimental animates in the documentation, but I don’t undertake to use them yet)