title: How to prevent a CSS animation from going back to its original position?
body: <p>So, my CSS moves a div to -40px after 3 seconds. After doing so, the div is then moved back to its original position. Here is the code:</p>
  
  <pre><code>#jsAlert {
      width: 100%;
      height: 40px;
      position: absolute;
      left: 0px;
      top: 0px;
      background-color: rgba(0, 0, 0, 0.6);
      animation:mymove 3s;
      animation-delay: 3s;
  
      /*Safari and Chrome*/
      -webkit-animation: mymove 2s;
      -webkit-animation-delay: 2s;
  }
  
  @keyframes mymove {
      from {top: 0px;}
      to {top: -40px;}
  }
  
  @-webkit-keyframes mymove /*Safari and Chrome*/
  {
      from {top: 0px;}
      to {top: -40px;}
  }
  </code></pre>
  
  <p>How would I prevent the div from returning to its original position?</p>