简单理解 CSS3 动画 -- 2d

transform

```
  转换， 默认显示或在一个动作之后由一种样式 直接变为 另一种样式

  <div class="box">div</div>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    transform: translate(100px, 0);
  }

  div 默认在距离左侧100px 位置

  <div class="box">div</div>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .box:hover {
    transform: translate(100px, 0);
  }
  div 默认在左侧 位置移入div, div 直接变到 距离左侧100px 处
```
- translate(X, Y) 
  ```从当前位置移动， X/Y 在x/y轴上移动的距离 ```
- rotate() 
  ```顺时针旋转的角度 ```
- scale(X, Y) 
  ```X/Y 宽度/高度 放大缩小的比例 ```
- skew(X, Y) 
  ```倾斜角度 ```

transition

```
  过渡， 由一种样式到另一种样式的 转变过程

  <div class="box">div</div>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: background 1s;
  }
  .box:hover {
    background: yellow;
  }

  transition四个参数为一组 以 ',' 分割， 可以写多组样式的变化
  transition: width 1s ease 1s, height 2s ease 1s;
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 1s, height 1s ease 1s, transform 3s ease 2s;
  }
  .box:hover {
    width: 200px;
    height: 200px;
    transform: translate(100px, 100px);
  }
```
- transition-property	
  ```规定应用过渡的 CSS 属性的名称  all 代表所有属性```
- transition-duration	
  ```定义过渡效果花费的时间。默认是 0 ```
- transition-timing 规定过渡效果的时间曲线。默认是 "ease" 
  ```
    linear	    规定以相同速度开始至结束的过渡效果
    ease	      规定慢速开始，然后变快，然后慢速结束的过渡效果
    ease-in	    规定以慢速开始的过渡效果
    ease-out	  规定以慢速结束的过渡效果
    ease-in-out	规定以慢速开始和结束的过渡效果
  ```
- transition-delay	
  ```规定过渡效果何时开始。默认是 0  ```

animation:

```
  transition 的加强版， 不仅能实现一种状态到另一种状态的过渡， 还能实现多种状态之间的过渡。
  <div class="box"></div>
  .box {
    width: 100px;
    height: 100px;
  }
  .box:hover {
    animation: changeBgc 1s;
  }
  @keyframes changeBgc {
    from {
      background-color: red;
    }
    to {
      background-color: yellow;
    }
  }

  <div class="box"></div>
  .box {
    width: 100px;
    height: 100px;
    animation: changeStatus 4s;
  }
  @keyframes changeStatus {
    0% {
      transform: translate(0, 0);
      background-color: red;
    }
    25% {
      transform: translate(100px, 0);
      background-color: yellow;
    }
    50% {
      transform: translate(100px, 100px);
      background-color: green;
    }
    75% {
      transform: translate(0, 100px);
      background-color: pink;
    }
    100% {
      transform: translate(0, 0);
      background-color: red;
    }
  }
```

- animation-name	规定 @keyframes 动画的名称
- animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0
- animation-timing-function	规定动画的速度曲线。默认是 "ease"
  ```
    steps() 接收两个参数  第
      一个参数是一个正整数 将动画的总时长 平等划分
      第二个参数是 非必填的 start / end 默认 end 
      start表示动画的第一帧会被立即执行,直接从第二帧开始，然后以第一帧结束；end则表示动画从第一帧开始到正常结束
  ```
- animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
- animation-delay	规定动画何时开始。默认是 0
- animation-iteration-count	规定动画被播放的次数。默认是 1
  ```infinite 无限循环 ```
- animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal" 
	```如果需要动画来回交替运动， 可以使用后面两个属性 ```
  ```
    reverse	  动画反向播放
    alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
    alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放
  ```
- animation-play-state	规定动画是否正在运行或暂停。默认是 "running", paused 暂停动画