make display: none fade out

by Osama Qassar

HTML

<div class="menu">
  <label>osama Qassar</label>
  <div>
    <a href>aasdasdasd</a>
    <a href>aasdasdasd</a>
  </div>
</div>

CSS

.menu div {
  -webkit-animation: doHide 0.2s linear forwards;
  animation: doHide 0.2s linear forwards;
}
.menu:hover div {
  -webkit-animation: doShow 0.2s linear forwards;
  animation: doShow 0.2s linear forwards;
}
.menu div a{
  display: block;
}
@keyframes doHide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
    visibility: hidden;
  }
}
@keyframes doShow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    display: block;
  }
}