Remove/Hide div from DOM after animation completes using CSS?

Question

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 th

Answer 1

Add something at 99% or so to your keyframes, and set opacity to 1 in that. If you have opacity: 1 at the start, then it will stay that way until 99%. Only at 100% will it change.

It's not technically fired at 100%. If you want that, I'd recommend using some JavaScript here, but this will at least give the illusion you want.

@keyframes slide {
  0% {
    left: 0;
  }
  20% {
    left: 20%;
  }
  40% {
    left: 40%;
  }
  60% {
    left: 60%;
  }
  80% {
    left: 80%;
  }
  99% {
    opacity: 1;
  }
  100% {
    left: 100%;
    overflow: hidden;
    opacity: 0;
    display: none;
    visibility: hidden;
  }
}

UPDATE:

As per your request, here is a JavaScript version. Keep in mind, there are endless ways to accomplish such a task. I am using vanilla JS (no jQuery, etc.), and using ES6 syntax.

What we do here is set a timeout, and at the end of that timeout I broadcast an event animation_end. That event listener will handle the end of the animation (in this case, it adds a class which will handle the fading out). This is much more granular than you need it to be, you could simply do the adding of the class within the setTimeout, but I think it is slightly better this way as you can abstract you can do other things with events such as animation start, etc.

Here is the fiddle: https://jsfiddle.net/vmyzyd6p/

HTML:

CSS:

.slide-box {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: slide 3s linear 1;
  -webkit-transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  transition: opacity 2s ease-in-out;
}
.animationEnd {
  opacity: 0;
}
@keyframes slide {
  0% {
    left: 0;
  }
  20% {
    left: 20%;
  }
  40% {
    left: 40%;

  }
  60% {
    left: 60%;

  }
  80% {
    left: 80%;
  }
  100% {
    left: 100%;
  }
}

JavaScript:

// Create a function that handles the `animation_end` event
const animationEnd = () => {
    // Grab the slidebox element
    let slideBox = document.getElementById('slide-box');

    // Get the class of the slidebox element
    let slideClass = slideBox.getAttribute('class');

    // Add the animation end class appended to the previous class
    slideBox.setAttribute('class', slideClass + ' animationEnd');
};

// Create the animation end event
let animationEndEvent = new Event('animation_end');

// Cross browser implementation of adding the event listener
if (document.addEventListener) {
    document.addEventListener('animation_end', animationEnd, false);
} else {
    document.attachEvent('animation_end', animationEnd);
}

// Set the timeout with the same duration as the animation. 
setTimeout(() => {
        // Broadcast the animation end event
        document.dispatchEvent(animationEndEvent);
}, 3000);