How to make a div disappear

Question

How can I make a div disappear in 5s when hovering by only using css? I tried something like this:

.a {
  display: block;
  transition: display 5s;
}
.a:hover {
  display: none;
}

Answer 1

Display property doesn't get affected by transitions. You can use opacity instead.

a{
    opacity:1;
    transition: opacity 5s linear;
}

a:hover{
    opacity:0;
    transition: opacity 5s linear;
}

Here is a working demo.

a{
    opacity:1;
    transition: opacity 5s linear;
}

a:hover{
    opacity:0;
    transition: opacity 5s linear;
}

<a> I will disapear </a>

Answer 2

yes but its can not be done right away like you have been doing. It requires a little more effort.

<a class="hide" href="#">Make me disappear in 5s </a>

CSS:

a.hide:hover {
    animation: animateVisibility 0s ease-in 5s forwards;
    animation-fill-mode: forwards;
}

@keyframes animateVisibility {
   to {
       width:0;
       height:0;
       visibility:hidden;
        }
 }