element.animate, applying style changes after the animation is finished

Question

I am running a simple native element.animate:

element.animate([{
        transform: "translate(0px, 0)"
    }, {
        transform: "translate(200px, 0)"
    }], {
        duration: 1000,
        iterations: 1,
        delay: 0,
        easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
        direction: 'normal',
        fill: 'both'
}); 

Fiddle: http://jsfiddle.net/tox47k28/

The problem is that after the animation ends I can not set any transform styles to that element. The transform propriety seems frozen.

The only way to "unfroze" that propriety would be to call .cancel() on that animation, but then, the element reverts to its initial state.

UPDATE 29 OCT 2014

Demo: http://jsfiddle.net/f27hpnjL/1/

You can nolonger "unfreeze" an animation with "fill: both". If you want to manipulate the styles afterwards you need to "fill: backwards":

element.animate([{
        transform: "translate(0px, 0)"
    }, {
        transform: "translate(200px, 0)"
    }], {
        duration: 1000,
        iterations: 1,
        delay: 0,
        easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
        direction: 'normal',
        fill: 'backwards' // Use this inorder to manipulate the style attribute after animation end

}).onfinish = function(e){

    //    I wish I had a refference to my keyframes here!!!
    //    Reset the last keyFrame
    element.style.webkitTransform = "translate(200px, 0)";
    //    Cancel the animation
    this.cancel();
}

Answer 1

Could you just use this?

var animation = element.animate([{
        transform: "translate(0px, 0)"
    }, {
        transform: "translate(200px, 0)"
    }], {
        duration: 1000,
        iterations: 1,
        delay: 0,
        easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
        direction: 'normal',
        fill: 'both'
}); 
animation.onfinish = function () {
     animation.cancel();
     element.style.transform = "translate(400px, 0)"    
}

http://jsfiddle.net/tox47k28/2/