# 动画属性详解

URL: https://caijiao.org/css/09-animation/03-animation-properties
Source: docs/css/09-animation/03-animation-properties.md
Description: CSS 动画属性用于控制动画的名称、时长、延迟、节奏、循环方式等，组合使用可实现丰富的动态效果。

CSS 提供多个动画相关属性，用于细致控制动画行为。通常与 `@keyframes` 搭配使用。

## 1. 常用动画属性

| 属性名                      | 说明                 | 示例值                                  |
| --------------------------- | -------------------- | --------------------------------------- |
| `animation-name`            | 指定使用的关键帧名称 | `slideMove`                             |
| `animation-duration`        | 动画持续时间         | `2s`, `500ms`                           |
| `animation-timing-function` | 动画节奏曲线         | `ease`, `linear`, `steps(4)`            |
| `animation-delay`           | 动画延迟时间         | `0s`, `1s`                              |
| `animation-iteration-count` | 动画播放次数         | `1`, `infinite`                         |
| `animation-direction`       | 播放方向             | `normal`, `reverse`, `alternate`        |
| `animation-fill-mode`       | 动画执行前后状态     | `none`, `forwards`, `backwards`, `both` |
| `animation-play-state`      | 动画播放状态         | `running`, `paused`                     |

## 2. 简写属性

```css
animation: slideMove 2s ease-in-out 0s infinite alternate;
```

等同于：

```css
animation-name: slideMove;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
```

## 动画属性详解示例

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