title: Changing element's top position with animation on click
body: <p>I'm trying to change div's top position with animation when I click on it. So I tried something like that:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container" id="container"&gt;
      &lt;div class="pink" id="pink"&gt;pink&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* { margin:0; padding:0; } 
  html, body { width:100%; height:100%; }
  .container { 
      width:100%; 
      height:100%; 
      overflow:hidden; 
      position:absolute; 
      display:block; 
      top:0;  
      left:0; 
      background-color: #77c8ff; 
  }
  .pink {
      width:100%; 
      height: 100%; 
      background-color: #ff23f0; 
      position: absolute; 
     top:90%;
     -webkit-transition: top 1s linear ease-out;
  }
  </code></pre>
  
  <p>JS (in <code>&lt;HEAD&gt;</code>)</p>
  
  <pre><code>var pink;
  var topPos = 90;
  
  window.addEventListener('load', init, false);
  
  function init() {
      pink = document.getElementById('pink');
      pink.onclick = function(){raiseDiv()};
  }
  
  function raiseDiv(){
      topPos -= 20;
      if (topPos &lt;= 0) topPos = 0;
      pink.style.top = topPos+'%';
  }
  </code></pre>
  
  <p>It does raise the div, but without animation. I tried to use <code>for</code> loop and with each iteration raise the div by 1 percent with setTimeout and with setInterval to create a sort of animation, but that didn't work.</p>
  
  <p>So how can I make it work?</p>
  
  <p>Here's the <a href="http://jsfiddle.net/g96mcnxj/1/" rel="nofollow">jsfiddle</a> of the current code.</p>