CSS3-Keyframe-Aninationen bei mouseout rückgängig machen?

Hi, ich habe diese Keyframe-Animationen in CSS gemacht:

nav:hover #strich1 {
    animation: strich1 0.5s ease-out 0s 1 normal forwards;
}
nav:hover #strich2 {
    animation: strich2 0.5s ease-out 0s 1 normal forwards;
}
nav:hover #strich3 {
    animation: strich3 0.5s ease-out 0s 1 normal forwards;
}
@keyframes strich1 {
    from {
        transform: rotate(0deg);
        width: 24px;
    }
    to {
        transform: rotate(45deg);
        width: 30px;
    }
}
@keyframes strich2 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes strich3 {
    from {
        transform: rotate(0deg);
        width: 24px;
    }
    to {
        transform: rotate(-45deg);
        width: 30px;
    }
}

möchte ihr allerdings auch, dass sie sobald die Maus den Navigationsbereich(<nav>) wieder verlässt die Animationen wieder rückwärts ablaufen, weiß allerdings noch nicht so ganz wie. Ich habe es bereits so versucht:

nav:not(:hover) #strich1 {
    animation: strich1 0.5s ease-out 0s 1 reverse forwards;
}
...

und so:

nav #strich1 {
    animation: strich1 0.5s ease-out 0s 1 reverse forwards;
}
...

Hat allerdings beides nicht den gewünschten Effekt gebracht. Wisst ihr wie ich das machen könnte? Gibt es vllt eine Art Gegenteil-Pseudoklasse zu :hover? Wisst ihr da Abhilfe? Ansonsten hatte ich mir noch überlegt mit JavaScript nach dem feuern des mouseout events die Animation rückgängig zu machen wenn das mit CSS gar nicht geht.

PC, Computer, HTML, CSS, CSS3, Website programmieren, Keyframes
Was ist hier falsch (HTML, <picture>-Tag, CSS3 Media Queries)?

Ich habe hier dieses picture in HTML mit Media Queries eingebunden:

<picture>
                    <source media="screen and (max-width: 533px)" srcset="logo-mini.gif">
                    <source media="screen and (max-width: 800px)" srcset="logo-klein.gif">
                    <source media="screen and (max-width: 1220px)" srcset="logo-mittel.gif">
                    <source media="screen and (max-width: 1800px)" srcset="logo-groß.gif">
                    <img src="logo-max.gif" alt="Repair Café Logo">
                </picture>

Und im zugehörigen Stylesheet dieses Style-Regeln:

@media screen and (max-width: 533px) {
    #logo picture:nth-child(1) {
        padding: 2.5vh;
    }
}
@media screen and (max-width: 800px) {
    #logo picture:nth-child(2) {
        padding: 2.5vh;
    }
}
@media screen and (max-width: 1220px) {
    #logo picture:nth-child(3) {
        padding: 2.5vh;
    }
}
@media screen and (max-width: 1800px) {
    #logo picture:nth-child(4) {
        padding: 2.5vh;
    }
}
@media screen and (min-width: 1801px) {
    #logo picture:nth-child(5) {
        padding: 2.5vh;
    }
}

Aber beides funktioniert nicht. Es wird immer das <img>-Tag im Fallback-Inhalt angezeigt, und das Stylesheet funktioniert auch nicht, das gewünschte Padding tritt nicht auf. Obwohl nur mit dem <img>-Tag und ohne den Media Queries im CSS noch alles super funktioniert hat. Ich schätze deshalb das der Fehler an bei den Media Queries liegt. Aber ich check nicht was genau dann hier der Fehler ist. Könnt ihr mir da weiterhelfen?

Danke schonmal im voraus😊

Computer, Technik, HTML, Programmieren, CSS, Webentwicklung, CSS3, Website programmieren, Responsive Webdesign