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.

Answer 1

[EinAlexander]

möchte ihr allerdings auch, dass sie sobald die Maus den Navigationsbereich(<nav>) wieder verlässt die Animationen wieder rückwärts ablaufen

Dann musst du dafür 3 weitere Keyframes definieren, die die Animation "rückwärts" ablaufen lassen.

Alex

Comments

[Master643]

Okay, aber reicht nicht auch ein einfaches

animation-direction: reverse;

?

[EinAlexander]

@Master643

animation-direction: reverse;

geht auch. Dann definierst du .strich mit reverse und .strich:hover mit forward.

[Master643]

@EinAlexander

und so:

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

Hat allerdings beides nicht den gewünschten Effekt gebracht.

Hab ich ja auch versucht, hat aber nicht funktioniert.

[EinAlexander]

@Master643

Hab ich ja auch versucht, hat aber nicht funktioniert.

wie genau definierst du "hat nicht funktioniert"?

[Master643]

@EinAlexander

Das zu animierende Zeichen springt auf einmal ohne Animation in den Endzustand. Sowohl wenn ich die Maus über die Navigationsleiste ziehe, als auch wenn sich sie wieder rausziehe.

[EinAlexander]

@Master643

Das zu animierende Zeichen springt auf einmal ohne Animation in den Endzustand

Natürlich nicht, weil du ja keine Animation dafür festgelegt hast. Du musst eine Navigation für den :hover und für den nicht :hover festlegen:

<style>
nav:hover #strich1 {
   animation: strich1 0.5s ease-out 0s 1 normal forwards;
}

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

@keyframes strich1 {
   from {
       transform: rotate(0deg);
       width: 24px;
   }
   to {
       transform: rotate(45deg);
       width: 30px;
   }
}

[Master643]

@EinAlexander

Ach so, ich verstehe zwar nicht warum das mit animation-direction: reverse; nicht funktioniert, aber danke 😊.