Set the webkit-keyframes from/to parameter with JavaScript

Question

Is there any way to set the from or to of a webkit-keyframe with JavaScript?

Answer 1

The way I handle this is to not set either the from or to of the element style I am manipulating in the css file and before triggering the animation I will set the element style that it should go to with javascript. This way you are free to dynamically manage what stuff should do until we can manage this directly in js. You only need to specify one of the two. The setTimeout allows the application of the css rule to the element before the animation is triggered otherwise you would have a race condition and it wouldn't animate.

#someDiv.slideIn {
    -webkit-animation: slideIn 0.5s ease;
}

@-webkit-keyframes slideIn {
    0% {
        left:0px;
    }

    100% {}
}


var someDiv = document.getElementById('someDiv');
someDiv.style.left = '-50px';
setTimeout(function(){
    someDiv.addClass('slideIn');
},0);