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?
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>