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?

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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!