Resolved: Appearing element disappears after animation

Question:

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>

Answer:

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>

If you have better answer, please add a comment about this, thank you!

Resolved: Appearing element disappears after animation

Resolved: Openlayers: Update clusters depending on filter (geometryFunction)

Resolved: Getting ‘502 Bad Gateway’ while deploying Springboot app in EKS

Resolved: Why is NGINX’s $request_uri empty?

Leave A Reply