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.
1 Antwort
![](https://images.gutefrage.net/media/user/EinAlexander/1568031404353_nmmslarge__0_0_355_355_53fff13ea2c79ad9fbc680094640ebd8.jpg?v=1568031404000)
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
![](https://images.gutefrage.net/media/user/EinAlexander/1568031404353_nmmslarge__0_0_355_355_53fff13ea2c79ad9fbc680094640ebd8.jpg?v=1568031404000)
animation-direction: reverse;
geht auch. Dann definierst du .strich mit reverse und .strich:hover mit forward.
![](https://images.gutefrage.net/media/default/user/11_nmmslarge.png?v=1551279448000)
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.
![](https://images.gutefrage.net/media/user/EinAlexander/1568031404353_nmmslarge__0_0_355_355_53fff13ea2c79ad9fbc680094640ebd8.jpg?v=1568031404000)
Hab ich ja auch versucht, hat aber nicht funktioniert.
wie genau definierst du "hat nicht funktioniert"?
![](https://images.gutefrage.net/media/default/user/11_nmmslarge.png?v=1551279448000)
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.
![](https://images.gutefrage.net/media/user/EinAlexander/1568031404353_nmmslarge__0_0_355_355_53fff13ea2c79ad9fbc680094640ebd8.jpg?v=1568031404000)
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;
}
}
![](https://images.gutefrage.net/media/default/user/11_nmmslarge.png?v=1551279448000)
Ach so, ich verstehe zwar nicht warum das mit animation-direction: reverse; nicht funktioniert, aber danke 😊.
Okay, aber reicht nicht auch ein einfaches
?