如何添加时间和延迟到requestAnimationFrame？

Question

我的设计包含一个SVG矩形和一个画圆弧的画布。我正在制作一个动画，其中矩形将首先增长，然后弧将增长。我快到了，但是我的两个元素同时都在制作动画。我将css关键帧用于矩形的动画，并在绘制时使用requestAnimationFrame对弧进行动画处理。  .ss{animation: myframes 3s ease-in-out }@keyframes myframes {from {height: 0px;}to{  height: 315px;}}<svg  height="350" width="800">    <rect  class="ss" x="415" y="51" filter="#008080" stroke-miterlimit="10" width="110" height="413">    </rect></svg><canvas style="display: block;" id="bar" width="600" height="500"></canvas>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 < finish + 1) {    requestAnimationFrame(function () {      animate(circum * curr /100 + start);    });  }}animate();我想让矩形保持动画，但现在矩形完成后弧会开始动画（添加延迟），并且我希望弧的动画变慢（添加定时）在下面添加小提琴：https : //jsfiddle.net/r9t2v6g5/