title: how to prevent css animation from running on page load
body: <p>I have a container <code>div</code> set with <code>overflow:hidden</code> that swaps between two cards, with only one visible at a time:</p>
  
  <pre><code>[card 1 | card 2]
  </code></pre>
  
  <p>I have jquery set up so that, when a user clicks on a button, it toggles a class, <code>.slid</code>, on the  <code>div</code>, with stylus styling that changes its <code>margin-left</code> parameter to <code>-400</code> or so.</p>
  
  <pre><code>     .container
              &amp;.slid {
                  margin-left: -400px;
  </code></pre>
  
  <p>This all works; whenever you press the button, the cards flip back and forth.</p>
  
  <p>I wanted to write an animation so that the cards will slide back and forth instead, so I changed my stylus code to</p>
  
  <pre><code>       .container{
              animation: slideout 1s;
              &amp;.slid {
                  margin-left: -400px;
                  animation: slidein 1s;
              }
  </code></pre>
  
  <p>with corresponding animations:</p>
  
  <pre><code>@keyframes slidein {
      from {
          margin-left: 0px;
      }
  
      to {
          margin-left: -400px
      }
  
  }
  
  @keyframes slideout {
      from {
          margin-left: -400px;
      }
  
      to {
          margin-left: 0px;
      }
  
  }
  </code></pre>
  
  <p>This also works more or less as intended, but I have one problem: since the stylus code is set to run the animation on load, a page refresh will run the <code>slideout</code> animation on page load. Is there a way around this easily that still preserves the animations sliding back and forth?</p>