CSS Frage zu Animationen

[Potti2012]

Liebes Forum,

ich verzweifle hier nun fast an einer CSS Frage:

Mein Menü soll sich von links nach rechts schieben, wenn die Checkbox aktiv ist.

Hierzu habe ich folgendes gemacht:

.mod_navigation {
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

nav:has(:checked) .mod_navigation {
transform: none;
}

Hier der Link zu meiner Testumgebung:
https://2024.das-edelweiss-graen.at/

Hat jemand einen Rat, was ich falsch gemacht habe?

[mlweb]

Du solltest https korrekt einrichten. Ich bekomme im Firefox eine Sicherheitswarnung.

[Potti2012]

Du solltest https korrekt einrichten. Ich bekomme im Firefox eine Sicherheitswarnung.

Ja, es ist aktuell überhaupt kein https eingerichtet, die Seite muss ohne aufgerufen werden

[zoglo]

Hat jemand einen Rat, was ich falsch gemacht habe?

https://www.w3.org/TR/css-display-3/...lay-properties

display properties lassen sich nicht animieren, schaue deinen CSS-Code mal genauer an

Ja, es ist aktuell überhaupt kein https eingerichtet, die Seite muss ohne aufgerufen werden

Bin ich immer sehr vorsichtig mit, will ja verschlüsselte und nicht unverschlüsselte Verbindung im Internet.
Habe auch browserstack genutzt um nachzuschauen, da ich dem Braten hier sonst auch nicht trauen würde .

[Potti2012]

https://www.w3.org/TR/css-display-3/...lay-properties

display properties lassen sich nicht animieren, schaue deinen CSS-Code mal genauer an



Bin ich immer sehr vorsichtig mit, will ja verschlüsselte und nicht unverschlüsselte Verbindung im Internet.
Habe auch browserstack genutzt um nachzuschauen, da ich dem Braten hier sonst auch nicht trauen würde .

@zoglo: erstmal vielen Dank für deine Mühe, ich schaue mir den Code leider seit Stunden an und komme nicht drauf …
Wenn ich in den devTools den haken bei

@media only screen and (min-width: 992px)
nav:has(:checked) .mod_navigation {
transform: none;
}

entferne, dann sehe ich genau das gewünschte Verhalten.

[Potti2012]

@zoglo: erstmal vielen Dank für deine Mühe, ich schaue mir den Code leider seit Stunden an und komme nicht drauf …
Wenn ich in den devTools den haken bei

@media only screen and (min-width: 992px)
nav:has(:checked) .mod_navigation {
transform: none;
}

entferne, dann sehe ich genau das gewünschte Verhalten.

@ZOGLO:


DANKE - hab es gefunden!!!!!!!

[zoglo]

DANKE - hab es gefunden!!!!!!!

Für die Nachwelt:

Display properties lassen sich nicht animieren.
Über einen not-selector und :checked war mod_navigation auf display: none gesetzt - display:flex hat erst danach gegriffen.

Wollte hier dem TE den Denkanstoß geben, den Fehler macht man dann nie wieder