How to make a div move smoothly?
<p>I have a page where divs containing text appear one after one, and disappear as soon as they are followed by another, using CSS transition :</p>

<p>on JSFiddle : <a href="https://jsfiddle.net/5kp6qdgg/9/" rel="nofollow">https://jsfiddle.net/5kp6qdgg/9/</a></p>

<h2>HTML :</h2>

<pre><code>&lt;body&gt;
    Click multiple times on this button:
    &lt;br /&gt;
    &lt;input type="button" value="Display one more div" /&gt;
    &lt;div id="div_container"&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<h2>CSS :</h2>

<pre><code>div#div_container {
  position: relative;
}

.log {
    position: relative;
    display: inline-block;
    margin-right: 50%;
    opacity: 1;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}

.hidden {
  opacity: 0;
}
</code></pre>

<h2>Javascript :</h2>

<pre><code>// Event listener
var button = document.getElementsByTagName("input")[0];
button.addEventListener ('click', oneMore);

// Spawn a div
function oneMore() {
    var div = document.getElementById("div_container");
  div.innerHTML += "&lt;div class=log&gt;Hello, I will soon disappear&lt;/div&gt;";
  clear ();
}

// Clear every div except the last
function clear () {
    var logs = document.getElementsByClassName("log");
    for (x=0; x&lt;(logs.length-1); x++) {
        var classes = logs[x].className.split(" ");
        // Only thoses not already cleared
        if (classes.length == 1) {
            logs[x].className += (" waiting");
            (function (x) {
                window.setTimeout ( function () {
                    logs[x].className += (" hidden");
                    logs[x].addEventListener("transitionend", function () { logs[x].style.display = "none" });
                    logs[x].addEventListener("webkitTransitionend", function () { logs[x].style.display = "none" });
                }, 500);
            })(x);
        }
    }
}
</code></pre>

<p>So the remaining div move up to the top, but jerkily, whereas I would like it to translate smoothly.</p>

<p>Does anyone knows how to do this only with CSS and pure javascript ?</p>