title: Line height animation for large body of text
body: <p>I'm designing a website for my business and I'm trying desperately to make an interactive design concept work.</p>
  
  <p>I set my logo in white against a body of text. <a href="http://i.imgur.com/2Qi9sEF.png" rel="nofollow">Here's an image</a>. I liked it so much I used the body of text as the entire sidebar.</p>
  
  <p>Now I've been trying to animate the line-height property of the background text to <a href="http://i.imgur.com/7FaeqfM.png" rel="nofollow">"fade in" the white logo</a>.</p>
  
  <p>The problem is, in order to have enough lines of text to make the logo and sidebar text stand out, I have to have a big chunk of text.</p>
  
  <p>Right now, I'm using a body of text about 6700 lines long.</p>
  
  <p>I've tried the two basic methods for animating line height changes. However, the change is always sudden and slightly delayed.</p>
  
  <p>1) I added a <code>transition: all</code> statement to the CSS for the text:</p>
  
  <pre><code>#text {
  text-align: right;
  font-size: 30%;
  height: 100px;
  line-height: 7.0 em;
  transition: all 500ms ease;
  </code></pre>
  
  <p>I then wrote a function to change the line height with a range slider. The slider works, but there is no transition - the line height change is instantaneous, even when it's only one step (0.01em).</p>
  
  <p>2) I downloaded and installed the <code>jQuery</code> easings plugin from gsgd.co.uk. I then made it so the line height of the text goes down every time the logo is clicked.</p>
  
  <pre><code>$(document).ready(function(){
      $("#logo").click(function(){
          $("#text").animate({
          "line-height": "-=0.5em"},
          1000,
          "easeInOutQuad"
          );
      });
  });
  </code></pre>
  
  <p>Before I tried this out, I tested <code>easeInOutBounce</code> on three lines of text. The easing plugin worked, though it wasn't as buttery smooth as I hoped. And on the big wall of text, the line height change is still instantaneous. In fact, it buffers; the text will shrink to a single line, I'll bring it back to 4em with the slider, then the line height will <em>continue</em> shrinking (in sudden bursts), like it hasn't processed all the clicks.</p>
  
  <p>So I assume the browser is at its limits (I'm using Chrome BTW). I really like this idea though. </p>
  
  <p>Is there any way something like this could be made to work? And if not, is there a known threshold for how much text you can try to animate before the browser gives up?</p>