css @keyframes

/* 使用 @keyframes 定义动画 */
@keyframes example {
  /* 动画开始时的样式 */
  0% {
    background-color: red;
    transform: translateX(0);
  }

  /* 动画进行到 50% 时的样式 */
  50% {
    background-color: yellow;
    transform: translateX(100px);
  }

  /* 动画结束时的样式 */
  100% {
    background-color: green;
    transform: translateX(200px);
  }
}

/* 应用动画到元素 */
div {
  width: 100px;
  height: 100px;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

解释说明：

• @keyframes 规则用于创建动画。它定义了动画在不同关键帧（时间点）的状态。
• 在这个例子中，example 是动画的名称。
• 0% 表示动画开始时的状态，50% 表示动画进行到一半时的状态，100% 表示动画结束时的状态。
• background-color 和 transform 属性用于改变元素的背景颜色和位置。
• animation-name 指定了要应用的动画名称。
• animation-duration 设置了动画的持续时间。
• animation-iteration-count 设置了动画重复的次数，infinite 表示无限次重复。