title: How to make a div move smoothly?
body: <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>