CSS アニメーションを一時停止する

animation-play-state: paused;で実行中のアニメーションを一時停止できる。

実際に動作を確認したい人向け
https://jsfiddle.net/junya_5102/ttc43Lry/

Sample Code

html

<button id="reset">RESET</button>
<input  id="stop" type="checkbox"><label for="stop">STOP</label>
<div class="box"></div>

css

.box{
  position: relative;
  left: 0;
  width: 100px;
  height: 100px;
  margin-top: 50px;
  border: 50px inset blue;
  box-sizing: border-box;

  /* animation */
  animation: turn_anim 1s linear infinite alternate;
}

/* stop */
#stop:checked ~ .box{
  animation-play-state: paused;
}

/* reset */
#reset:active ~ .box{
  animation: none;
}

@keyframes turn_anim{
  100%{
    left: 100px;
  }
}

animation-play-stateについて

値は running と pausedの2つです

runningと指定するとアニメーションが実行されます。
初期値なので省略が可能

pausedと指定するとアニメーションを停止できます。
停止中のアニメーションを再開すると停止した時の状態から再開されます。

詳細は下記URLを参照
animation-play-state - CSS | MDN