Hide Div CSS

I was wondering how to hide a div on click. The following CSS code works, but the div size continues to exist. I don't know, maybe transition, transform (see also) will be the solution. If you want to test the following, I would use online html editor.net.

<style>
.hide {font-size:30pt;color:red;}
.hide:active {visibility:hidden;}
.hide:focus {visibility:hidden;}
.hide:visited {visibility:hidden;}
</style>

<a name="done"></a>
<a href="#done" class="hide"><div class="hide">click to hide this</div></a>

click to hide this

Additional testing, transition, transform.

Additional testing. The code below may not exactly represent the above orange div because I am continuing to experiment with the code for the orange div.

<style> .test {
width: 90%;
height: 90px;
background: orange;
margin: 20px;
border-radius: 10px 10px 80px 10px;
transition: all 3s ease-in-out;}

.test:hover {
width: 0px;
height: 0px;
background: red;} </style>

<div class="test">TRANSFORM</div>