如何在CSS中同步两个动画？

.animation-element-a {
  animation: animation-a 2s infinite;
  animation-delay: 0s; /* 设置动画元素a的delay为0秒 */
}

.animation-element-b {
  animation: animation-b 2s infinite;
  animation-delay: 0s; /* 设置动画元素b的delay为0秒 */
}

@keyframes animation-sync {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

.animation-element-a {
  animation: animation-sync 2s infinite;
}

.animation-element-b {
  animation: animation-sync 2s infinite;
}

const elementA = document.querySelector('.animation-element-a');
const elementB = document.querySelector('.animation-element-b');

setTimeout(() => {
  elementA.classList.add('start-animation');
}, 0);

setTimeout(() => {
  elementB.classList.add('start-animation');
}, 0);