[CSSチュートリアル】CSSアニメーション 途中で止める方法とポーズを維持する方法

.xxx {
  animation-play-state: paused;  
  // Once this property is added, the CSS animation will be paused immediately and will remain at the current frame
}

.xxx {
  animation-play-state: running; 
  //Once this property is added, the CSS animation will immediately start running from the current frame;
}

 animation-play-state:pused

//i equals 1 when the media plays and the note floats, i equals 0 when the media pauses and the note pauses.
            if (i == 1) {
                right.style.animationPlayState = "pused"
                audio.pause();
                i = 0;
            } else {
                right.style.animationPlayState = "running";
                audio.play();
                i = 1;
            }