title: Using RequestAnimationFrame to create Fade in effect
body: <p>I know this can be done by using CSS transition, however this 2 seconds fade-in exercise has to be done by using requestAnimationFrame, below is my code, it shows the picture but no fade in effect, also the render process is not smooth.  Could you tell me where i get wrong and how to correct it? Thanks very much.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;style&gt;
      body {
        height: 100vh;
      }
      
      #picture {
        background-image: url("p1.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 400px 400px;
        width: 80%;
        margin: auto;
        height: 80%;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="picture"&gt;&lt;/div&gt;
  
    &lt;script&gt;
      var start = null;
      var abc = document.getElementById("picture")
      var opacity = 0;
  
      function step(timestamp) {
        if (!start) start = timestamp;
        var progress = timestamp - start;
        opacity = Number(window.getComputedStyle(abc).getPropertyValue("opacity"));
        if (opacity &lt; 1) {
          opacity = opacity + 0.1;
          abc.style.opacity = opacity;
        }
        if (progress &lt; 2000) {
          window.requestAnimationFrame(step);
        }
      }
  
      window.requestAnimationFrame(step);
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>