JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.rich-harris.co.uk/ramjet/ramjet.js"></script>
<button id='go'>go</button>

<p>Expected result: clicking 'go' causes a box to appear and slide across the screen while fading out. At the end of the animation, the box is removed.</p>
<p>Actual result: in IE11, the box often jumps back to its first keyframe before the animationend event fires.</p>
<p class='moral'>Moral of the story: IE is still a steaming pile of garbage</p>

CSS

div {
    width: 100px;
    height: 100px;
    margin: 0 1em 1em 0;
    background-color: teal;
    animation: alternate 0.4s 1 slide linear;
}

.moral {
    font-family: 'Comic Sans MS';
    color: red;
}

 @keyframes slide {
     0% {
         opacity: 1;
        transform: translate(0px,0px) scale(1,1);
    }
    
    100% {
        opacity: 0;
        transform: translate(100px,0px) scale(1,1);
    }
}

JavaScript

go.addEventListener( 'click', function () {
    go.disabled = true;
    
    div = document.createElement( 'div' );
    div.addEventListener( 'animationend', function () {
        div.parentNode.removeChild( div );
        go.disabled = false;
    });
    
    document.body.appendChild( div );
});