使用Jquery

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>