basti1012.bplaced.net

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. Im großen und ganzen funktioniert 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 Button Namen (Menu & Close) mittels des Pseudoelements::before Content in den Menü Button 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?

Code

                                    
                                    <style>
      
      *{
    margin: 0; padding: 0; box-sizing: border-box;
    font-size: 100%;
}
/* HTML & Body
==================================================*/
html{scroll-behavior: smooth;}
body{
    height: 100vh;
    background: #dddddd;
}
/* Header
==================================================*/
header{
    position: fixed; top: 0; 
    width: 100%; height: 60px;
    background: #000000;
    font-size: 150%;
}
/* Header Title
--------------------------------------------------*/
header #title{
    display: flex; justify-content: center; align-items: center;
    position: absolute; top: 0; left: 0;
    width: auto; height: 60px;
    padding: 0 10px 0 10px;
    color: #ffffff;
    text-decoration: none;
}
/* Header Checkbox Button
--------------------------------------------------*/
header #nav_check{display: none;}
header #nav_btn{
    display: flex; justify-content: center; align-items: center;
    position: absolute; top: 0; right: 0;
    width: auto; height: 60px;
    padding: 0 10px 0 10px;
    color: #ffffff;
    cursor: pointer;
}

#nav_btn::before{
  content: 'MENU';
  opacity:1;
  color:white;
  animation:out linear 300ms 1;
}

header #nav_check:checked ~ #nav_btn::before{
  content: 'CLOSE';
  opacity:1;
  color:red;
  animation:in linear forwards 300ms 1;
}


@keyframes in{
  0%{
    transform:scale(1); 
    opacity:1;
  }
  50%{
     transform:scale(0);
       opacity:0.5;
  }
  70%{
     transform:scale(2);
       opacity:0;
  }
  100%{
     transform:scale(1);
      opacity:1;
  }
}
@keyframes out{
  0%{
    transform:scale(1); 
    opacity:1;
  }
  50%{
     transform:scale(0);
       opacity:0.5;
  }
  70%{
     transform:scale(2);
       opacity:0;
  }
  100%{
     transform:scale(1);
      opacity:1;
  }
}


header nav{
    position: fixed; top:100%;
    width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    background: #3a3534;
    transition: all 0.8s ease-in-out;
    z-index: 1000;
}
header nav ul li{
    list-style: none;
    text-align: center;
    padding: 10px;
}
header nav ul li a{
    color: #ffffff;
    font-size: 220%;
    text-decoration: none;
}
header #nav_check:checked ~ nav{
    top: 60px; bottom: 0;
    transition: all 0.8s ease-in-out;
}
      
</style>
    <header>
        <a id="title" href="#">Pagename</a>
        <input id="nav_check" type="checkbox">
        <label id="nav_btn" for="nav_check"></label>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Works</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>