title: Remove/Hide div from DOM after animation completes using CSS?
body: <p>I have an animation where a div slides out the view, however when the animation is completed, the div just returns to its origin position in the view. How do I totally remove the div or hide it after the animation ends using just CSS? </p>
  
  <p><strong>Here is the markup:</strong></p>
  
  <pre><code>  &lt;div class="container"&gt;
      &lt;div class="slide-box" id="slide-box""&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>and the css:</strong></p>
  
  <pre><code>.slide-box {
    position: relative;
    width: 100px;
    height: 100px;
    background-image: url(../pics/red.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  
    animation: slide 5s linear 1;
  }
  @keyframes slide {
    0% {
      left: 0;
    }
    20% {
      left: 20%;
    }
    40% {
      left: 40%;
  
    }
    60% {
      left: 60%;
  
    }
    80% {
      left: 80%;
    }
    100% {
      left: 100%;
      overflow: hidden;
      visibility: hidden;
    }
  }
  </code></pre>
  
  <p>I don't want it to fade out over the duration of the animation, i just want it to disappear once it hits 100% in the keyframe. Thanks ahead of time!</p>