title: Triggering two different animations onClick?
body: <p>I am trying to trigger two different animations by adding and removing two different css classes with two different css animations by using javascript to do so. However, the div does not preserve the previous animated state, and I need it to do so because of how I designed the UI. I am using forwards in the animations property, but the div performs the animation when it is clicked and then goes back to previous state and then performs the other animation.</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>const projects = document.getElementById('projects')
  
  projects.addEventListener('click', () =&gt; {
      if(projects.classList.contains('projects-animation') == true){
          projects.classList.remove('projects-animation')
          projects.classList.add('projects-animation2')
      }
      else{
          console.log('animation2')
          console.log(projects.classList)
          projects.classList.remove('projects-animation2')
          projects.classList.add('projects-animation')
      }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.projects-container{
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      grid-area: projects;
      padding: 20px;
      font-size: 100px;
      background-color: hsl(4, 7%, 45%);
      cursor: pointer;
  }
  
  .projects{
      position: relative;
      height: fit-content;
  }
  
  .projects-animation{
      animation: projects 1s ease-in-out backwards;
  }
  
  .projects-animation2{
      animation: projects2 1s ease-in-out backwards;
  }
  
  @keyframes projects {
      100%{
          transform: translate(50%,-250%);
      }
  }
  
  @keyframes projects2 {
      100%{
          transform: translate(-50%, 250%);
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="projects-container"&gt;
       &lt;div id = "projects" class="projects"&gt;Projects&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>