CSS visibility: hidden; zeitverzögert ausführen
Die Animation funktioniert ohne Probleme, leider ist "hidden" quasi instant, so dass die "verschwinde Animation" nicht mehr sichtbar angezeigt wird.
Ich würde daher gerne "hidden" etwas zeitverzögert aktivieren. Gibt es sowas?
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
body{
height:100%;
width:100%;
}
div{
height:100vh;
width:100%;
font-size:50px;
color:white;
position:absolute;
text-align:center;
}
#unten{
background:green;
}
#oben{
background:red;
animation:start 2s forwards 1 5s;
}
@keyframes start{
0%{
opacity:1;
}
100%{
opacity:0;
visibility: hidden;
/* ggf pointer-events:none; */
}
}
</style>
</head>
<body>
<div id="unten">Element unten was anklickbar werden soll</div>
<div id="oben">Ich werde nach 5 sekunden ausgeblendet</div>
<script>
document.getElementById('unten').addEventListener('click',function(){
alert('click unten')
})
</script>
</body>