如何制作固定的CSS动画

@keyframes animationName {
  0% {
    /* 初始样式 */
  }
  50% {
    /* 中间样式 */
  }
  100% {
    /* 结束样式 */
  }
}

.element {
  animation-name: animationName;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes animationName {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

.element {
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}