javascript - アニメーションの途中で CSS アニメーションをスムーズに変更する

Question

半分完成した CSS アニメーションから次のアニメーションにスムーズに移行しようとしていますが、わずかなスタッターなしでそれを行う方法が見つかりません。非常に高速で無限のアニメーションがあり、クリックするとゆっくりと停止します。現在、アニメーションの切り替え中に常にわずかなヒックアップが発生しています。おそらく、次のアニメーションを開始する前に次の requestAnimationFrame を待つ必要があるためです。他のオプションはありますか？これが私がやっているおおよそのことです：

function onClick(){
  // get current location of element
  var content = $(".content");
  var currentOffset = $(content[0]).css("top");

  // set property to stop jumping back to the beginning of current animation
  content.css({ top: currentOffset });

  // stop the current animation
  content.removeClass("anim-infinite");

  // update content based on current location
  // updateContent(currentOffset);

  // setup ease-out animation
  window.requestAnimationFrame(function() {
    content.addClass("anim-ease-out");
    content.css({ top: parseFloat(currentOffset) + 50  });    
  });
}

そして、これが関連する CSS です。

@keyframes "spin" {
  from { top: 0 };
  to { top: -200%; }
}
.anim-infinite{
  animation: spin 1s linear infinite;
}
.anim-ease-out{
  transition: all 0.25s ease-out;
}

距離とタイムスパンは、2 つのアニメーション間で一定の速度を維持するのに妥当であり、関連するブラウザー プレフィックスを使用しています。

2 番目のアニメーションに「線形」タイミング関数を使用すると、同じスタッターが発生します。を設定しようとしましたがanimation-fill-mode:both、成功しませんでした。完了するアニメーションにのみ影響するようです。

コンテンツの場所に基づいてコンテンツを更新しようとすると、スタッターが悪化します。これは、アニメーションがいつ停止するかに依存します。