<div id="main-wrapper">
  <div class="anim"></div>
</div>  

:root {
  --playing-state: paused;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
#main-wrapper {
  width: 100%;
  min-height: 100vh;
}

#main-wrapper {
  display: flex;
  align-items: center;
}

#main-wrapper:hover {
  --playing-state: running;
}

.anim {
  width: 100px;
  height: 100px;
  margin: auto;
  animation: simpleAnim 2s linear infinite alternate;
  animation-play-state: var(--playing-state);
}

@keyframes simpleAnim {
  0% {
    background-color: red; 
    transform: translateX(0);
  }
  100% {
    background-color: yellow;
    transform: translateX(200px);
  }
}

/*
https://css-tricks.com/stop-animations-during-window-resizing/#comment-1752001
*/