title: Javascript making animation slower?
body: <p>Im using velocity.js in an attempt to see the difference between CSS3 animations and Javascript animations. </p>
  
  <p>For CSS3 my animations are on a h1 and h2 element</p>
  
  <pre><code>/* HeaderIntro */
  @keyframes headerintro {
    0% {
      opacity: 0;
      margin-right: 15rem;
    } 
  
    100% {
      opacity: 1;
      margin-right: 0;
    }
  }
  
  /* SubHeaderIntro */
  @keyframes subheaderintro {
    0% {
      opacity: 0;
      margin-left: 15rem;
    } 
  
    100% {
      opacity: 1;
      margin-left: 0;
    }
  }
  
  /* TitlePulse */
  @keyframes titlepulse {
    50% {
      transform: scale(.98);
    }
  }
  </code></pre>
  
  <p>My velocity.js version of this is </p>
  
  <pre><code>$(document).ready(function() {
  
    headerIntro();
    headerPulse();
  });
  
  
  $mainHeader = $('.mainheader');
  
  function headerIntro() {
    $subHeader = $('.subheader');
    $mainHeader.css('margin-left', '-15rem').css('opacity', 0)
               .velocity({'margin-left': '0rem', opacity: 1}, 750, 'ease-in-out');
    $subHeader.css('margin-left', '15rem').css('opacity', 0)
              .velocity({'margin-left': '0rem', opacity: 1}, 750, 'ease-in-out', {queue: false});
  }
  
  function headerPulse() {
    $mainHeader.velocity({scale: '95%'}, 850, 'ease-in-out')
               .velocity({scale: '100%'}, 850, 'ease-in-out', headerPulse);
  }
  </code></pre>
  
  <p>for some reason the velocity example has choppy frames for the pulsing title.</p>
  
  <p>Heres a codepen to the CSS3: <a href="http://codepen.io/Snowfiring/pen/Beiba" rel="nofollow">http://codepen.io/Snowfiring/pen/Beiba</a></p>
  
  <p>Heres a codepen to the Velocity: <a href="http://codepen.io/Snowfiring/pen/jbuvy" rel="nofollow">http://codepen.io/Snowfiring/pen/jbuvy</a></p>