animation css

动画 (animation) 在 CSS 中是一种强大的效果，可以通过添加关键帧 (keyframes) 定义动画的各个阶段。以下是一个简单的例子，展示了如何使用 CSS 创建一个基本的动画效果：

/* 定义关键帧 */
@keyframes example {
  0% { background-color: red; }
  50% { background-color: yellow; }
  100% { background-color: blue; }
}

/* 应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

在上面的例子中，我们创建了一个名为 `example` 的关键帧。这个关键帧定义了动画从开始到结束的状态变化。在这种情况下，我们使用 `background-color` 属性来改变背景颜色。

然后，我们将该动画应用于一个 `<div>` 元素上，通过设置 `animation-name` 属性为关键帧的名称，并使用 `animation-duration` 属性指定动画的持续时间。

你可以根据需要自定义关键帧和动画属性，以创建更复杂的动画效果。CSS 动画还支持其他属性，如 `animation-timing-function`、`animation-delay`、`animation-iteration-count` 等，这些属性可以进一步控制动画的行为。