title: Fade in element on scroll down using css
body: <p>Example: <strong><a href="http://www.chartjs.org/" rel="noreferrer">http://www.chartjs.org/</a></strong></p>
  
  <p>When scrolling down each article shows up when it gets in the view-port of the browser. The css is</p>
  
  <pre><code>#examples article {
      -webkit-transition: opacity 200ms ease-in-out;
      -ms-transition: opacity 200ms ease-in-out;
      -moz-transition: opacity 200ms ease-in-out;
      -o-transition: opacity 200ms ease-in-out;
      transition: opacity 200ms ease-in-out;
      position: relative;
      margin-top: 20px;
      clear: both;
  }
  </code></pre>
  
  <p>I tried this css but it does not work. Is there some javascript that works together with the css? How can I achieve this kind of scroll->fadeIn effect?</p>