animation（MDN）

一、简介

animation 是一种简写属性，用来指定一组或多组动画

1. animation-name：用于描述应动画名字（指定 @keyframes 规则的名字）
2. animation-duration：设置动画完成一个周期所需的时间
3. animation-timing-function：设置动画在一个周期中的中间值如何计算
4. animation-delay：设置动画执行的等待时间
5. animation-iteration-count：设置动画停止前的执行次数
6. animation-direction：设置动画是正常播放、反向播放，还是在正常和反向播放序列之间来回交替播放
7. animation-fill-mode：设置动画执行之前和之后如何将样式应用于其元素
8. animation-play-state：设置动画是运行还是暂停

当使用 background 属性时，各个背景属性都有初始值

.test{
    animation-name: none;
    animation-duration: 0s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
}

我们给元素加动画的时一般都使用 animation 这种简写形式，而不是一个个分开写。

二、各个属性

1. animation-name

用于描述应动画名字（指定 @keyframes 规则的名字）

• 类比 transition-property ```css .test{ animation-name: bounce; }

/ 设置的动画的关键帧 / @bounce{ 0% { background-color: orange; color: #000; margin-top: 0; } 100% { background-color: orange; color: #000; margin-top: 40%; } }

<a name="YfwAv"></a>
### 2. animation-duration
设置动画完成一个周期所需的时间
- 类比 [transition-duration](https://www.yuque.com/machaoxue/depository/mqqsrf#kI4DR)
```css
.test{
    animation-duration: 1s;
}

3. animation-timing-function

设置动画在一个周期中的中间值如何计算

• 类比 transition-timing-function

  .test{
  animation-timing-function: ease-in;
  }

4. animation-delay

设置动画执行的等待时间

• 类比 transition-delay

  .test{
  animation-delay: 0s;
  }

5. animation-iteration-count

设置动画停止前的运行次数

• 可以写 infinite 一直运行，可以指定次数 ```css .test{ animation-iteration-count: infinite; }

.test2{ animation-iteration-count: 2; }

.test3{ animation-iteration-count: 1.5; }

<a name="qV8JT"></a>
### 6. animation-direction
设置动画是正常播放、反向播放，还是在正常和反向播放序列之间来回交替播放
- 有四个值可选 normal、reverse、alternate、alternate-reverse
```css
/* 正常播放 */
.test{
    animation-direction: normal;
}
/* 反向播放 */
.test2{
    animation-direction: reverse;
}
/* 先正常再反向来回交替 */
.test3{
    animation-direction: alternate;
}
/* 先反向再正常来回交替 */
.test4{
    animation-direction: alternate-reverse;
}

7. animation-fill-mode

设置动画执行之前和之后如何将样式应用于其元素

• 有四个可选值 none、forwards、backwards、both ```css / 不对元素添加任何样式，默认值 / .test{ animation-fill-mode: none; }

/ 让元素在动画结束后依旧维持动画的最后一帧 / .test2{ animation-fill-mode: forwards; }

/ 让元素初始状态一直维持在动画的第一帧 / .test3{ animation-fill-mode: backwards; }

/ 同时应用 forwards 和 backwards / .test4{ animation-fill-mode: both; }

<a name="eYQS8"></a>
### 8. animation-play-state
设置动画是运行还是暂停
- 有两个可选值 paused、running
```css
/* 暂停 */
.test{
    animation-play-state: paused;
}
/* 运行 */
.test2{
    animation-play-state: running;
}

三、参考链接

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation
CSS Tricks：https://css-tricks.com/using-multi-step-animations-transitions/