title: How to animate CSS transition effect via a scroll?
body: <p>I have an element I want to "expand" and change the background color for a page background. As the user scrolls, a dot in the center will expand to fill the page with a new background color. I see examples of how to change the background but not how to "expand" it. <a href="http://jsfiddle.net/dh24uqL8/2/" rel="nofollow noreferrer">I have attached a jsfiddle of the CSS animation effect I'm looking for.</a> This example shows how it will look but only works on the hover. You can see what it's supposed to look like if you scroll the example and hover the white dot.<a href="http://jsfiddle.net/dh24uqL8/2/" rel="nofollow noreferrer">1</a></p>
  
  <p>Preferably I'd like to accomplish this with css animation but I'm not opposed to trying it out with javascript. <a href="https://jsfiddle.net/98fvashd/" rel="nofollow noreferrer">I've been fiddling around with that here.</a></p>
  
  <p>Second, I've been using a fake element to get the example but is there a way I can do this effect without needing the element and just using the container's background-color?</p>
  
  <p>Here's the HTML of the example of the effect I'm trying to achieve.</p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;span class="white"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the CSS:</p>
  
  <pre><code>.container {height:500px;width:100%;background:#ed565d;position:relative;}
  .container span {display:block;}
  .white {background:#ffffff;height:10px;width:10px;margin:auto;border-radius:100%;position:absolute;top:50%;left:50%;}
  .container:hover .white {
      width:300%;
      height:300%;
      -moz-transition: all 0.5s ease-out;
      -o-transition: all 0.5s ease-out;
      -webkit-transition: all 0.5s ease-out;
      transition:all 0.5s ease-out;
      top:-100%;
      left:-100%;
  }
  </code></pre>