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;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

解释说明：

1. @keyframes example: 定义了一个名为 example 的动画，其中包含多个关键帧（0%, 50%, 100%），每个关键帧定义了不同时间点上的样式。
2. 0%: 动画开始时，背景颜色为红色，元素的位置没有移动。
3. 50%: 动画进行到一半时，背景颜色变为黄色，元素向右移动了 100 像素。
4. 100%: 动画结束时，背景颜色变为绿色，元素向右移动了 200 像素。
5. animation-name: example: 将定义好的 example 动画应用到 div 元素上。
6. animation-duration: 4s: 设置动画的持续时间为 4 秒。
7. animation-iteration-count: infinite: 设置动画无限循环播放。

这样，div 元素会按照定义的关键帧逐步改变其背景颜色和位置，形成一个从左到右移动并变色的效果。