setTimeout || requestAnimationFrame动画不流畅

Question

showLoop动画非常流畅，但有时会使用css3动画轻松属性跳过帧和混乱。

 function showLoop() {
     setTimeout(function () {
         $spans.eq(i).css('opacity', 1);
         i = i + 1;
         if (i < count) {
             showLoop();
             if (i == count - 2) delay = 800;
         }
     }, 400);
 }
 showLoop();


 function draw() {
     setTimeout(function () {
         if (i < count) {
             requestAnimationFrame(draw);
             //$spans.eq(i).css('opacity', 1);
             $spans.eq(i).fadeIn(400);
             i = i + 1;
             if (i == count.length - 1) {
                 delay = 800;
             }
             if (i == count) {
                 $spans.css('opacity', 0);
                 $(background).css('background', 'rgba(222, 88, 39, .0)');
             }
         }
     }, delay);
 }

请求动画框架不够平滑。我是以错误的方式做这件事，我应该通过jquery .animation吗？