@keyframes 举个例子

@keyframes是CSS动画中的一种规则，用于定义一系列的动画帧。以下是一个简单的例子：

/* 定义一个名为 "example" 的关键帧动画 */
@keyframes example {
  /* 定义 0% 时的状态 */
  0% {
    background-color: red;
  }
  /* 定义 50% 时的状态 */
  50% {
    background-color: yellow;
  }
  /* 定义 100% 时的状态 */
  100% {
    background-color: green;
  }
}

/* 将上述动画应用到一个元素上 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  /* 设置动画的名称、持续时间、循环模式等 */
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

这个例子定义了一个名为 "example" 的关键帧动画，它包含三个关键帧，分别定义了元素在动画开始、中间和结束时的状态。然后将该动画应用到一个 div 元素上，让其背景色在 red、yellow 和 green 之间循环变化，持续时间为 4 秒，循环次数为无限。