title: How to add timing and delay to requestAnimationFrame?
body: <p>I have a design that includes a SVG rectangle and a canvas that draws an arc. I am making an animation where the rectangle will grow first and after that the arc will.</p>
  
  <p>I am almost there but both my elements animate at the same time.</p>
  
  <p>I am using css keyframes for the animation of the rectangle and used requestAnimationFrame to animate the arc while draw.</p>
  
  <pre><code>  .ss{
  
  animation: myframes 3s ease-in-out 
  
  }
  
  @keyframes myframes {
  
  from {
  
  height: 0px;
  }
  
  to{
    height: 315px;
  }
  
  }
  </code></pre>
  
  <pre><code>&lt;svg  height="350" width="800"&gt;
      &lt;rect  class="ss" x="415" y="51" filter="#008080" stroke-miterlimit="10" width="110" height="413"&gt;
      &lt;/rect&gt;
  &lt;/svg&gt;
  &lt;canvas style="display: block;" id="bar" width="600" height="500"&gt;
  &lt;/canvas&gt;
  </code></pre>
  
  <pre><code>var canvas = document.getElementById('bar'),
      width = canvas.width,
      height = canvas.height;
  
  
  var ctx = canvas.getContext('2d');
  ctx.lineWidth = 110;
  ctx.strokeStyle = '#000';
  ctx.shadowOffsetX = 0;
  ctx.shadowOffsetY = 0;
  ctx.shadowBlur = 10;
  
  
  var x = width / 2,
      y = height / 98,
      radius = 170,
      circum = Math.PI * 2,
      start = Math.PI / -44, // Start position (top)
      finish = 37, // Finish (in %)
      curr = 0; // Current position (in %)
  
  var raf =
      window.requestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function(f){return setTimeout(f, 9000/60)};
  
  window.requestAnimationFrame = raf;
  
  
  function animate(draw_to) {
    ctx.clearRect(0, 0, width, height);
    ctx.beginPath();
    ctx.arc(x, y, radius, start, draw_to, false);
    ctx.stroke();
    curr++;
    if (curr &lt; finish + 1) {
      requestAnimationFrame(function () {
        animate(circum * curr /100 + start);
      });
    }
  }
  
  animate();
  
  </code></pre>
  
  <p>I want to keep the rectangle animate they way it is now but the arc will start to animate when rectangle is done(add delay) and I want the animation of the arc slower(add timing)</p>
  
  <p>Adding a fiddle below:
  <a href="https://jsfiddle.net/r9t2v6g5/" rel="nofollow noreferrer">https://jsfiddle.net/r9t2v6g5/</a></p>