Można użyć :target
<viv class="container">
<a href="#aaa"><button>UKRYJ DIV</button></a>
<div id="bbb"></div>
<div id="aaa">
<div></div>
<div></div>
<div></div>
</div>
<a href="#"><button>POKAZ DIV</button></a>
</div>
body{
background-color: #25025d;
}
*{
transition: all .5s;
}
.container{
display: flex;
flex-direction: column;
justify-content: center;
width: 500px;
margin: 0 auto;
background-color: #d00037;
padding: 50px 10px;
}
a{
display: block;
width: 100px;
margin: 0 auto;
}
button{
width: 100px;
height: 30px;
border: none;
background-color: #471936;
color: #fff;
cursor: pointer;
}
button:hover{
background-color: #a8859b;
color: #471936;
}
#aaa, #bbb {
display: flex;
justify-content: space-evenly;
align-items: center;
background-color: #b9a3e0;
width: 400px;
height: 100px;
color: white;
text-align: center;
margin: 10px auto;
}
div div{
background-color: #6d172d;
width: 100px;
height: 50px;
}
@keyframes opacityDiv {
from {opacity: 1;}
to {opacity: 0;}
}
:target{
animation: opacityDiv 5s ease-in-out;
animation-fill-mode:forwards;
}