Do not reset keyframe animation when class removed
<p>Is it possible to preserve the transition imposed by a keyframe animation? I would like to remove the class with the keyframe animation before it's finished and have the animation not reset.</p>

<p>example:</p>

<pre><code>@keyframes right {
    100% {
        left: 500000px;
    }
}

.animate-right {
    animate: right 500s 1;
}
</code></pre>

<p>and the JS associated with clicking the element with the class is:</p>

<pre><code>function(e) {
    var el = this;

    setTimeout(function() {
        el.className = el.className.replace('animate-right', '');
    }, 500);

    el.className += ' ' + animate-right;
}
</code></pre>

<p>Doing the above results in the animation being applied until the class it removed but with a reset back to the position before the animation has started. I have tried setting up start/stop points, but I would prefer not to do this as it is very brute force. example:</p>

<pre><code>function(e) {
    var el = this;

    setTimeout(function() {
        el.style.left = el.getBoundingClientRect().left;
        el.className = el.className.replace('animate-right', '');
    }, 500);

    el.style.left = 0;
    el.className += ' ' + animate-right;
}
</code></pre>

<p>I have also tried applying <code>animation-play-state</code> at the end, but it still resets.</p>