动画播放状态暂停时重置动画持续时间？但是没有重新启动它

Question

我有一个可以暂停和取消暂停的动画。然而目前它不是很准确......它应该对应于计时器滴答。

代码笔：http://codepen.io/meek/pen/zradga

如果让它运行就足够准确，但是一旦你开始暂停/取消暂停，它就会意外地开始表现。我希望能够跳过动画中的不同部分，以确保动画始终正确。我怎么能这样做？

  function activateTimer() {
    if(inProgress===false) {

      // set animation timer and state

      if(currentTimer=='session') {
        $('#cover').css('animation-duration', sSession + 's');
      }
      else {
        $('#cover').css('animation-duration', sBreak + 's');
      }
      $('#cover').css('animation-play-state', 'running');

      inProgress = true;
      updateTimer(sSession);
      interval = setInterval(function() {
        if(sSession==session*60) {
          // because repeating this destroys the animation's linearity
          $('#cover').css('animation-duration', sSession + 's');
          sSession -= 1;
          updateTimer(sSession);
        }
        else if(sSession>1 && sSession<session*60) {
          currentTimer = 'session';
          // session time!
          focusSession();
          sSession -= 1;
          updateTimer(sSession);
        }
        else if(sSession==1) {
          sSession -= 1;
          updateTimer(sSession);
        }
        else {
          // break time!
          // if first frame of timer, restart animation
          if(sBreak==breaks*60) {
            focusBreak();
            currentTimer = 'break';
            sBreak -= 1;
            updateTimer(sBreak);
            restartAnimation();
            $('#cover').css('animation-duration', sBreak + 's');
            $('#cover').css('animation-play-state', 'running');
          }
          else if(sBreak>1 && sBreak<breaks*60) {  
            sBreak -= 1;
            updateTimer(sBreak);
          }
          else if (sBreak==1){
            // start a new session
            sBreak -= 1;
            updateTimer(sBreak);
          }
          else if (sBreak==0) {
            sSession = session*60;
            sBreak = breaks*60;
            updateTimer(sSession);
            focusSession();
            restartAnimation();
            $('#cover').css('animation-duration', sSession + 's');
          }
        }
      }, 1000);

    }
    else {
      inProgress = false;
      clearInterval(interval);

      // pause animation
      $('#cover').css('animation-play-state', 'paused');

    }
  }