Element.animate, applying style changes after animation is complete

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 cannot set the transform styles for this element. The commitment to transformation seems frozen.

The only way to "unfreeze" this decency is to call .cancel () in this animation, but then the element is returned to its original state.

UPDATE 29 OCT 2014

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

You can nolonger "unfreeze" the animation with "fill: both". If you want to manipulate styles later, you need to "fill: back":

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