title: What's wrong with the animation for the menu?
body: <p>Okay so basically I have to do an internet site for school with HTML but only javascript animation, all the code work proprely but when I want to transform the three lines I use for my hamburger menu into a cross with a javascript animation nothing is happening and I really don't know why.
  If someone can help me I will be really greatful as always, thanks for reading.</p>
  <pre><code>     &lt;!doctype html&gt;
  
      &lt;head&gt; 
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;title&gt;California Hotel&lt;/title&gt;
      
      &lt;style&gt;
          * {
             margin: 0;
             padding: 0;
             }
  
          
          body {
              font-family: Arial, Helvetica, sans-serif;
          }
  
  
          .container{
              width: 100%;
              height: 100vh;
              background-color: grey;
          }
          .navbar{
              width: 300px;
              height: 100%;
              background-color: blanchedalmond;
              position: fixed;
              top: 0;
              right: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 10% 0 0 5%;
          }
  
          .hamburger-menu{
              width: 35px;
              height: 30px;
              position: fixed;
              top: 50px;
              right: 50px;
              cursor: pointer;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
          }
          .line{
              width: 100%;
              height: 3px;
              background-color: black;
              
              
             
  
          }
  
          .change .line-1{
            transform: rotate(-45deg) translate(-8px,6px);
  
          }
          .change .line-2{
            opacity: 0;
          }
  
          .change .line-3{
            transform: rotate(45deg)  translate(-8px,-6px);;
          }
  
  
          .nav-list{
              text-align: right;
          }
  
          .nav-item{
              list-style: none;
              margin: 25px;
  
          }
  
          .nav-links{
              text-decoration: none;
              font-size: 20px;
              color: rgb(22, 73, 73);
              font-weight: 300;
              letter-spacing: 1px;
              text-transform: uppercase;
              position: relative;
              padding: 3px 0;
  
          }
          .nav-links::before,
          .nav-links::after{
              content: &quot;&quot;;
              width: 100%;
              height: 2px;
              background-color: orange;
              position: absolute;
              left: 0;
              transform: scaleX(0);
              transition: transform 0.5s;
              
              
  
          }
          
          .nav-links::after{
              bottom: 0;
              transform-origin: right;
          }
  
          .nav-links::before{
              top: 0;
              transform-origin: left;
          }
  
          .nav-links:hover::before,
          .nav-links:hover::after{
              transform: scaleX(1);
          }
      
  
        &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt; 
  
  
      &lt;div class=&quot;container&quot;&gt;
          &lt;nav class=&quot;navbar&quot;&gt;
              &lt;div class=&quot;hamburger-menu&quot;&gt;
                  &lt;div class=&quot;line line-1&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;line line-2&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;line line-3&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
              
  
  
              &lt;ul class=&quot;nav-list&quot;&gt;
                  &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;a href=&quot;#&quot; class=&quot;nav-links&quot;&gt;A PROPOS&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;a href=&quot;#&quot; class=&quot;nav-links&quot;&gt;NOUS CONTACTER&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;a href=&quot;#&quot; class=&quot;nav-links&quot;&gt;NOS RESEAUX SOCIAUX&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/nav&gt;
          &lt;/div&gt;
  
             &lt;script&gt;
              const menuIcon  = document.querySelector(&quot;.hamburger-menu&quot;);
             const navbar = document.querySelector(&quot;.nabar&quot;);
              MenuIcon.addEventListener(&quot;click&quot;,() =&gt; {
            navbar.classList.toggle(&quot;.change&quot;)});
            &lt;/script&gt;
      
  
           &lt;/body&gt; 
        &lt;/html&gt; 
  </code></pre>