title: animation start when scroll
body: <p>I have a bar chart that animates with CSS3 and the animation currently activates as the page loads.</p>
  
  <p>The problem I have is that the given bar chart is placed off screen due to lots of content before it so by the time a user scrolls down to it, the animation has already finished.</p>
  
  <p>I was looking for ways either through CSS3 or jQuery to only activate the CSS3 animation on the bar chart when the viewer sees the chart.
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.animation {
      width: 1000px;
      margin: 50px auto;
  }
  
  table {
      width: 100%;
  
  }
  
  .tr-box table,
  .tr-box tr,
  .tr-box td {
      border: 1px solid black;
      border-collapse: collapse;
  }
  
  .tr-box tr td:first-child {
      width: 20%;
      text-align: center;
  }
  
  .tr-box {
      margin-bottom: 20px;
  }
  
  .tr-box tr td {
      padding: 10px;
  }
  
  
  
  
  .a-box-animation {
      height: 40px;
      width: 100%;
      -webkit-animation-name: box;
      animation-name: box;
      -webkit-animation-duration: 6s;
      animation-duration: 6s;
      -webkit-animation-iteration-count: 1;
      animation-iteration-count: 1;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
  }
  
  
  @keyframes box {
      0% {
          width: 0%;
          background-color: blue;
  
      }
      100% {
          background-color: blue
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="popularity"&gt;
  
          &lt;div class="animation "&gt;
  
              &lt;h2&gt;Most popular books&lt;/h2&gt;
              &lt;div class='tr-box'&gt;
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;td&gt;The Snowman&lt;/td&gt;
                          &lt;td&gt;
                              &lt;div class="a-box-animation"&gt;
  
                              &lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
      &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>=======</p>