使用 Jquery 在两个 css 动画之间交替

Question

我想创建一个带有 3 个球的钟摆系统。我已经创建了球和动画方法。这是我的代码：

.circle {
  width:30px;
  height:30px;
  background-color:#000;
  border-radius:50%;
}

.circle_container {
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:07%;
}

.circle:first-child {
  animation: translate1 2s ease-in-out 0s 1 normal; 
}

.circle:last-child {
  animation: translate2 2s ease-in-out 2s 1 normal ; 
}

@keyframes translate1 {
  0% {
    transform : translateX(0px) translateY(0px);
  }
  
  50% {
     transform : translateX(-60px) translateY(-25px);
  }
  
  100% {
    transform : translateX(0px) translateY(0px);
  }
  
}

@keyframes translate2 {
  0% {
    transform : translateX(0px) translateY(0px);
  }
  
  50% {
     transform : translateX(60px) translateY(-25px);
  }
  
  100% {
    transform : translateX(0px) translateY(0px);
  }
  
}

<div class="circle_container">
  <div class="circle" id="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

这个例子展示了我想要实现的循环。但问题是它只发生一次。我想让它无限期地像这样切换。

当我在 animation-iteration-count 属性上将 1 替换为无限时，两个动画以不同的方式播放。

那么，我怎样才能使用 jquery 让球像我的演示一样无限期地移动（使用相同的交替，第一个球向左向右移动，然后第三个向左向右移动，依此类推）...请如果有人对如何使用 jquery 来解决这个问题有一个想法，我已经准备好接受他们的建议。

Answer 1

不需要使用jQuery，你只需要在第二个动画开始和第一个动画结束时延迟：

.circle {
  width:30px;
  height:30px;
  background-color:#000;
  border-radius:50%;
}

.circle_container {
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:07%;
}

.circle:first-child {
  animation: translate1 4s ease-in-out infinite;  /* 4s is for a 2s animation as 50% of the time it is not doing anything */
}

.circle:last-child {
  animation: translate2 4s ease-in-out infinite; 
}

@keyframes translate1 {
  0% {
    transform : translateX(0px) translateY(0px);
  }
  
  25% {
     transform : translateX(-60px) translateY(-25px);
  }
  
  50% {
    transform : translateX(0px) translateY(0px);  /* only animate to 50% so the last 50% is doing nothing - this is when animation 2 runs */
  }
  
  100% {
    transform : translateX(0px) translateY(0px);
  }
  
}

@keyframes translate2 {
  0% {
    transform : translateX(0px) translateY(0px); /* don't animate first 50% - this is when animation 1 runs */
  }
  50% {
    transform : translateX(0px) translateY(0px);
  }
  
  75% {
     transform : translateX(60px) translateY(-25px);
  }
  
  100% {
    transform : translateX(0px) translateY(0px);
  }
  
}

<div class="circle_container">
  <div class="circle" id="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>