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; */
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX