多个CSS动画:如何避免重新触发其中的一个？

<div class="animation animation1"></div>
<div class="animation animation2"></div>

.animation {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.animation1 {
  animation-name: animation1;
}

.animation2 {
  animation-name: animation2;
}

@keyframes animation1 {
  0% { transform: translateX(0); }
  100% { transform: translateX(200px); }
}

@keyframes animation2 {
  0% { transform: translateY(0); }
  100% { transform: translateY(200px); }
}

// 暂停animation1动画
document.querySelector('.animation1').classList.add('paused');

// 恢复animation1动画
document.querySelector('.animation1').classList.remove('paused');