Edit in JSFiddle

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