[Hilfe] Menu ausblenden und erst beim Hovern wieder einblenden

KratzKatz

Hallo,
ich verzweifle im Moment daran, nach dem das Menu mittels Keyframes nach dem Laden der Seite ausgeblendet wurde, es wieder, sobald ich darüber hovere einblenden zu lassen.

Das erste Ausblenden funktioniert ganz gut.
Wenn ich aber darüber hovere, wird es ohne die Wiedereinblendungs-Animation wieder eingeblendet. Die Transition fehlt.

Code

@keyframes opc
{
    0% {opacity: 0;}
    100% {opacity: 1;}
}




@-webkit-keyframes opc
{
     0% {opacity: 0;}
    100% {opacity: 1;}
}






#menu:hover
{
           -webkit-animation: opc 2s;
           -webkit-animation-fill-mode: forwards;
                   animation: opc 2s;
                   animation-fill-mode: forwards;
}








.menubg
{
    background-color: #8000ff;
    width: 100%;
    height: 40px;
    box-shadow: 0px 0px 20px 15px #000;
    position: fixed; 


-webkit-animation: opc 2s;
-webkit-animation-direction: reverse;
-webkit-animation-fill-mode: forwards;

animation: opc 2s;
animation-direction: reverse;
animation-fill-mode: forwards;
}


.
.
.




 <div id="menu" class="menubg opc">

Alles anzeigen

Hat jemand eine Lösung?

Danke fürs Lesen

Tags