Remove/Hide div from DOM after animation completes using CSS?
<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>