title: Pure CSS scroll animation
body: <p>I have been looking for a way to scroll down when clicking on a button that is located on top of a page using CSS3 only.</p>
  
  <p>So I've found this tutorial: <a href="http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/" rel="noreferrer">http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/</a></p>
  
  <p>Demo: <a href="http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/" rel="noreferrer">http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/</a></p>
  
  <p>But it's a bit too advanced for my needs since I just want the browser to scroll down on a click on one button located on top of the page, so I was wondering: is it possible to do those CSS scrolls without the input buttons, just with an anchor tag?</p>
  
  <p>HTML looks like this: <code>&lt;a href="#" class="button"&gt;Learn more&lt;/a&gt;</code></p>
  
  <p>I have already some CSS which I need to trigger on button click:</p>
  
  <pre><code>/* Button animation tryout. */
  .animate {
      animation: moveDown 0.6s ease-in-out 0.2s backwards;
  }
  @keyframes moveDown{
      0% { 
          transform: translateY(-40px); 
          opacity: 0;
      }
      100% { 
          transform: translateY(0px);  
          opacity: 1;
      }
  }
  </code></pre>