title: CSS Transitions: Animating between inline styles for "height" style attribute
body: <p>I am attempting to use CSS3 transitions for inline style attributes that are set dynamically through Javascript; I'm working on a project with AngularJS, which uses interpolated $scope variables inside style tags via interpolation, like so:</p>
  
  <pre><code>&lt;div class="growing-object" style="height: {{myValue}}px; background-position: -{{myValue}}px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I have defined a transition class, like so:</p>
  
  <pre><code>.growing-object {
      -webkit-transition: background 1000ms ease-out, height 1000ms ease-out;
      -moz-transition:    background 1000ms ease-out, height 1000ms ease-out;
      -ms-transition:     background 1000ms ease-out, height 1000ms ease-out;
      -o-transition:      background 1000ms ease-out, height 1000ms ease-out;
      transition:         background 1000ms ease-out, height 1000ms ease-out;
  }
  </code></pre>
  
  <p>The problem I seem to be running into is strange. The <code>background-position</code> style attribute will animate with no problem in Webkit and Firefox (and it looks good). However, the <code>height</code> style attribute isn't animating at all (and, in fact, is causing some strange issues when the value first changes).</p>
  
  <p>Has anyone ever run into this before? It seems to me that <code>height</code> should behave the same way as <code>background-position</code> in terms of smoothly tweening from one inline style value to the next, but that doesn't seem to be the case here. Am I running into some paint issues or something? I'm aware that I can use jQuery or plain Javascript as a fallback, but I'd rather not have to do that unless I absolutely have to.</p>
  
  <p>Thanks for your help!</p>