title: Javascript function, css keyframe not working
body: <p>I am trying to move my robot to the right by toggling between two classes, but it doesn't seem to be working. Please help. Created two classes and was trying to switch between two of those classes with toggle but not working.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function moveR() {
    let robot = document.getElementsByClassName("robot1");
    robot.classList.toggle = "moveRight";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.robot1 {
    position: absolute;
    width: 50px;
    height: 50px;
  }
  
  #moveRightBtn {
    position: absolute;
    top: 300px;
    font-size: 20px
  }
  
  .moveRight {
    animation-name: moveRight;
    animation-duration: 3s;
  }
  
  @keyframes moveRight {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(100px);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 id="Header1"&gt;Keyframe Practice&lt;/h1&gt;
  &lt;h2&gt;Moving The Robot To Right&lt;/h2&gt;
  
  &lt;img class="robot1" src="https://cdn-icons.flaticon.com/png/512/630/premium/630426.png? 
          token=exp=1636183057~hmac=45b700055844fa031977edfa2ee4457b"&gt;
  
  &lt;button onclick="moveR()" id="moveRightBtn"&gt;Move Right&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>