title: Im trying to callback a simple animation using jquery or javascript
body: <p>The animation in  my .css file is called <code>@keyframes scrollTextTwo{}</code>. the code in my .js file is:</p>
  
  <pre><code>$(document).ready(function(){
    rightBox.style.animation = "scrollTextTwo 10s 1";
  });
  </code></pre>
  
  <p>When I load the .html file in the browser it perfectly runs one time or it will run infinitely if i replace the "1": after the <em>scrollTextTwo 10</em> with infinite.
  My question is how can I get a second object such as #leftBox from my .css file to animate ONLY after the #rightBox has completed its animation in the above example.</p>
  
  <p>I have attached all three docs: html/css/.js with code pen just in case anyone wants to dive deep into the code.</p>
  
  <p><a href="http://codepen.io/hoyos/pen/dGMGbX" rel="nofollow">http://codepen.io/hoyos/pen/dGMGbX</a></p>