Do not reset keyframe animation when class removed

Question

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.

example:

@keyframes right {
    100% {
        left: 500000px;
    }
}

.animate-right {
    animate: right 500s 1;
}

and the JS associated with clicking the element with the class is:

function(e) {
    var el = this;

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

    el.className += ' ' + animate-right;
}

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:

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;
}

I have also tried applying animation-play-state at the end, but it still resets.

Answer 1

why do you remove the class? do not remove the class, just change the animationPlayState. a working example http://www.tutorialspark.com/css3/CSS3_Animation_Pause_Resume_Demo.php

if the class also does something else, then create two classes for it