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>