css动画keyframes

/* 定义一个名为 'example' 的关键帧动画 */
@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;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

解释说明：

• @keyframes example：定义了一个名为 example 的关键帧动画。
• 0%、50% 和 100%：分别表示动画在不同时间点的状态。0% 是动画的起点，100% 是动画的终点。
• background-color 和 transform：用于设置元素在不同时间点的颜色和位置变化。
• animation-name：指定应用的关键帧名称。
• animation-duration：设置动画的持续时间。
• animation-iteration-count：设置动画的循环次数，infinite 表示无限循环。

这个例子中，一个 div 元素会在 4 秒内从红色变为黄色再变为绿色，并且会水平移动。