Fade a div in and out with button click

Ask us anything How do I?
1

Hi,

i have a div that should not be displayed.
with a button click it should be displayed.
i do this with a variable (false and true), a workflow (changes the variable value) and a conditional rendering (depending on the variable value).
no problem.

now i want to give the div an animation. it should fade in and fade out (not only display or not).
i add an anmination to the div and it fades in by the button click.
works.

but how to give the div now the second animation, that it should fade out, if i click the button again (and the variable becomes “false” again).

the keyframe for the fadein is:
@keyframes keyframe-edition-animation { 0% {opacity:0;width:0px;} 100% {opacity:1;width:200px;}}

any ideas?
thanks for help.
stefan