Appearing element disappears after animation

I need some help with the visibility property. I'm trying to make an element appear and once it has appeared keeps being visible. That's this last point that I'm trying to get. I made it appear, but disappears right after the animation.

I suspect the element to take back its hidden value right after the animation ends and I don't know how to make its new visible value stable.

Thanks guys!

CSS:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  visibility: hidden;
  animation: appearing-menu 0.8s;
  animation-delay: 1s;
}

@keyframes appearing-menu {
  from {
    visibility: visible;
    bottom: -50px;
    opacity: 0;
    }
  to {
    bottom: 0px;
    opacity: 1;
    }
}

HTML:

<body>

<h1>The @keyframes Rule</h1>

<div></div>

</body>

Solution

Changed animation: appearing-menu 0.8s forwards;

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

forwards

The target will retain the computed values set by the last keyframe encountered during execution.

and added the visibility: visible to the last frame.

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  visibility: hidden;
  animation: appearing-menu 0.8s forwards;
  animation-delay: 1s;
}

@keyframes appearing-menu {
  from {
    visibility: visible;
    bottom: -50px;
    opacity: 0;
    }
  to {  
    visibility: visible;
    bottom: 0px;
    opacity: 1;     
  }
}

<body>

<h1>The @keyframes Rule</h1>

<div></div>

</body>