title: css3 transitions - How to make a div grow in height from bottom to top
body: <p>I am trying to make the following to work in IE10.</p>
  
  <p>I have a div with <code>id=footer</code> for whom I am changing the class from <code>class1</code> to <code>class2</code>.</p>
  
  <p>The HTML code is as follows</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/index.css" /&gt;
          &lt;title&gt;Test&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="container"&gt;
  
          &lt;/div&gt;
          &lt;div id="footer" class="class1"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The CSS code is as follows</p>
  
  <pre><code>body {
      overflow: hidden;
      width:  100%;
      height:  100%;
  }
  
  #container {
      overflow:  auto;
      position: absolute;
      width:  100%;
      height:  90%;
      background-color:#808080;
      top:0;
      left:0;
      border-width: 1px;
      border-color: #000;
      border-style: groove;
  }
  
  #footer {
      overflow: auto;
      position: absolute;
      left:0;
      width: 100%;
      border-width: 1px;
      border-color:#f00;
      border-style: groove;
      background-color: #ffd800;
  
      transition-property: top, height;
      transition-duration: 1s, 1s;
      transition-delay: 0, 0;
  }
  
  .class1 {
      top: 90%;
      height: 10%;
  }
  
  .class2 {
      top: 70%;
      height: 30%;
  }
  </code></pre>
  
  <p>Since I am simultaneously increasing both top and height, I expect the div to just riseup/expand when I am changing from <code>class1 to class2</code> and just contract when changing from <code>class2 to class1</code>. This works as expected in Firefox.</p>
  
  <p>But in IE10, when I change from <code>class1 to class2</code>, it is as if the transition effects are not obeyed for <code>top</code>. The div immediately shifts up and then the size gradually increases over 1 second.</p>
  
  <p>So, how do I solve this problem and get the expected results in IE10?</p>