title: Start CSS animation after scrolling to particular section of page
body: <p>I am trying to animate images using CSS on a webpage. The animation is working fine but I want to START the animation it only when user reaches at a particular section of the page. Here is my code:</p>
  
  <pre><code>&lt;div class="sec1-right"&gt;
     &lt;img class="sec1-dmush1" src ="sec1-dmush1.png"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.sec1-right{
      position: relative;
      width: 50%;
      float: right;
      box-sizing: border-box;
      min-height: 600px;
      margin-top: 86px;
  }
  
  /* first section animation */
  .sec1-dmush1 {
      animation: fadeAndScale .9s cubic-bezier(.45,-0.22,.34,1.69);
      transform-origin:center bottom;
      max-width: 150px;
      width: 100%;
      position: absolute;
      left: 180px;
      top: 300px;
      z-index: 0;
  }
  </code></pre>
  
  <p>Animation</p>
  
  <pre><code>@keyframes fadeAndScale{
      from{
          opacity:0;
          transform: scale3d(0,0,1);
      }
      to{
          opacity: 1;
          transform: scale3d(1,1,1);
      }
  }
  </code></pre>
  
  <p>How can I achieve</p>