<div class="div1">點擊暫停/繼續</div>
@keyframes move{
  to {
    margin-left: 250px;
  }
}

.div1{
  display: inline-block;
  font-size: 13px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  cursor: pointer;
  
  animation-name: move;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
.div1-paused{
  animation-play-state: paused;
}
$(function(){
  $("div.div1").on("click", function(){
    $(this).toggleClass("div1-paused");
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js