动画属性详细说明以及案例

动画属性用于定义CSS动画的行为，包括动画的持续时间、延迟、迭代次数、方向、填充模式等。以下是常用动画属性的详细说明及案例：

1. animation-name: 定义动画名称，对应@keyframes规则。

2. animation-duration: 定义动画完成一个周期所需的时间，单位为秒（s）或毫秒（ms）。

3. animation-timing-function: 定义动画的速度曲线，如ease、linear、ease-in等。

4. animation-delay: 定义动画开始前的延迟时间，单位为秒（s）或毫秒（ms）。

5. animation-iteration-count: 定义动画播放的次数，可以是数字或infinite表示无限次。

6. animation-direction: 定义动画是否反向播放，如normal、reverse、alternate等。

7. animation-fill-mode: 定义动画执行前后如何应用样式，如none、forwards、backwards等。

8. animation-play-state: 定义动画的播放状态，如running、paused。

案例：

@keyframes example {
  0% { background-color: red; }
  50% { background-color: yellow; }
  100% { background-color: green; }
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

在这个案例中，div元素将执行名为example的动画，动画持续时间为4秒，使用ease-in-out速度曲线，延迟1秒开始，无限次交替播放，动画结束后保持最后一帧的状态，动画状态为播放中。