Pseudoelemente ::before Content Animation?

  • Ich Wünsche einen schönen Guten Tag,


    ich bin gerade dabei mir eine Neue Webseite zu bauen und möchte mir für diese ein Hamburger Menü (Nur mit Menu & Close beschriftung) bauen mittels Checkbox-hack.

    Imgroßen und ganzen funtioniert dies auch recht gut, nur möchte ich das wenn ich den Menü Button nutze eine Animation ( z.b. Ein & ausblenden) abläuft.

    Ich habe den Butten Namen (Menu & Close) mittels des Pseudoelements ::before Content in den Menu Butten gepackt, bekomme es aber einfach nicht hin beim klicken auf dem Button einen smooth Effect ablaufen zu lassen.


    Meine Frage nun,

    Gibt es eine möglichkeit nur im CSS den ::before Content zu animimieren?


    Ich hoffe ich konnte meine Frage anständig Formolieren.


    MFG

  • Hey, danke für die schnelle Antwort.


    Ich bin nun leider nicht gerade ein Profi was das Coden von Webseiten angeht, lediglich Grundkenntnisse von Html & Css sind vorhanden.

    Wie genau muss ich das verstehen das der Checkbox-Hack nicht barrierefrei ist?

  • Habe nun eine Lösung gefunden.

    Habe ein 2tes Label eingetragen & den checkbox Button in der css neu bearbeitet.







    Document


      Pagename

  • Ja habe gesehen , mit 2 labels.

    Ist auch eine Lösung.

    Habe bei dir gesehen das scal() mit Minus Werten das Element dreht.

    Das habe ich auch noch nie gesehen.

    Habe versucht den gleichen Animationseffekt bei mir einzubauen , habe es aber so nicht hinbekommen, weil sich das Element immer gedreht hat.

    Mit rotate gegen wirken sah blöde aus wenn es sich dreht.


    Mit ein Label und deinen Effekt kannst du noch @keyframes nutzen

    https://codepen.io/basti1012/pen/abypBGj

  • Die lösung gefällt mir besser ich danke dir :thumbup:

  • Habe nun mit deiner Variante etwas gespielt und habe den effect den ich mit 2 label hate nun mit einem hinbekommen ich danke dir.


    https://codepen.io/MitchX/pen/eYEggEb