window.display_animate = function() { test.style.display = "block"; test.style.left = "100px"; } window.display_animate_fix = function() { test.style.display = "block"; getComputedStyle( test ).display; test.style.left = "100px"; } window.reset = function() { test.style.display = "none"; test.style.left = "20px"; } var test = document.getElementById("test");
<div id="test"></div> <input type=button onclick="reset()" value="reset" /> <input type=button onclick="display_animate()" value="display and try to animate" /> <input type=button onclick="display_animate_fix()" value="display and animate with fix" />
#test { position: absolute; top: 50px; left: 20px; width: 30px; height: 30px; background: #B3B; display: none; -webkit-transition: left .6s; -moz-transition: left .6s; transition: left .6s; }