How to make a css animation to hide an element?

Question

css

The bottom line is, if you set an animation to an element through keyframes, then it will always be executed when the element becomes visible. Example - jsfiddle.net/Zvyxd
Is it somehow possible to achieve the opposite effect when an element becomes display: none;?

Answer 1

Do you want to make it fade in and out? If so, why keyframes? You can make an additional class for an element that is responsible for hiding or showing it. And delete it or add it.
jsfiddle.net/YxsTV

Answer 2

jsfiddle.net/Zvyxd/5
I wrote a very hackish hastily, but you should understand the logic why the animation will work.

Answer 3

Updated
I recently did this
Link

Answer 4

jsfiddle.net/Zvyxd/10

Answer 5

Create two classes with different animations - one for appearing and one for hiding.
Then just add the required class depending on the situation - show or hide.

Answer 6

How to hide example_block on second click on "Show Element"?