# 动画 keyframes

URL: https://caijiao.org/css/09-animation/02-keyframes
Source: docs/css/09-animation/02-keyframes.md
Description: CSS 动画通过 @keyframes 定义关键帧，实现复杂的连续动画效果，提升网页交互与视觉体验。

CSS 动画利用 `@keyframes` 定义动画序列，再通过 `animation` 属性应用于元素，实现连续变化。

## 1. 定义关键帧

使用 `@keyframes` 定义动画的不同阶段样式。

```css
@keyframes example {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}
```

## 2. 应用动画

使用 `animation` 属性设置动画名称、时长、节奏和次数等。

```css
.element {
  animation: example 2s ease-in-out infinite;
}
```

- `2s`：动画持续时间
- `ease-in-out`：缓动函数
- `infinite`：无限循环

## 动画示例

[在线代码演示](/css/demos/24.html)