window.animateFromAuto = function() { var from = getComputedStyle( test1 ).width; // transitions need to be temporarily disabled in Webkit // otherwise the animation will start from "width: 0" test1.style[ transition ] = "none"; test1.style.width = from; getComputedStyle( test1 ).width; // re-enable the transitions test1.style[ transition ] = ""; getComputedStyle( test1 )[ transition ]; // and set the style, finally test1.style.width = "350px"; } window.animateToAuto = function() { var from, to; // let's say we don't know the current width from = getComputedStyle( test2 ).width; // temporarily disable the transitions // vendor prefix detection is worth it this time test2.style[ transition ] = "none"; test2.style.width = "auto"; var to = getComputedStyle( test2 ).width; // we're ready, let's reset the style of the element test2.style.width = from; getComputedStyle( test2 ).width; test2.style[ transition ] = ""; getComputedStyle( test2 )[ transition ]; // "hardcode" the width equivalent to "auto" test2.style.width = to; // the transitionendHandler will cleanup this value } function transitionendHandler( e ) { if ( e.target.id != "test2" || e.target.style.width == "350px" ) { return; } // webkit requires transition to be disabled again test2.style[ transition ] = "none"; test2.style.width = "auto"; // restore transitions getComputedStyle( test2 )[ transition ]; test2.style[ transition ] = ""; } window.reset = function() { test1.style.width = ""; test2.style.width = "350px"; } var test1 = document.getElementById("test1"), test2 = document.getElementById("test2"), transitionend = "transitionend", transition = "webkitTransition" in document.body.style ? (transitionend = "webkitTransitionEnd") && "webkitTransition" : "mozTransition" in document.body.style ? "mozTransition" : "transition" in document.body.style ? "transition" : false; document.addEventListener( transitionend, transitionendHandler );