Estuve haciendo algunas animaciones de cargado para mi página web y me gustaría saber si se puede eliminar el elemento tras su animación, ya que probe con "display: none" y "opacity: 0", pero los botones y otros elementos que hay detrás del loader no pueden ser interactuados.
#loading {
height: 100vh;
width: 100vw;
align-items: center;
justify-items: center;
text-align: center;
animation: difuminado-div 4.5s ease-in-out;
* {
margin-left: auto;
margin-right: auto;
}
}
@keyframes difuminado-div {
0% {
width: 100vw;
height: 100vh;
display: flex;
}
50% {
opacity: 1;
}
99% {
width: 100vw;
height: 100vh;
display: flex;
}
100% {
width: 0vw;
height: 0vh;
display: none
}
}
Espero que me podáis ayudar y gracias de antemano.