CSS动画

1. 补间动画transition

• transition:width 1s 1s,background 2s;
  transition-delay:2s;
  transition:all 1s;
  transition-timing-function：linear;
  

    - 变化的属性 动画时间 动画延迟时间
    - 可以用, 表示多个属性
    - 可以用all表示全部属性
    - linear ease-in-out中间快，开头结尾慢 ease-in开头慢后面越来越块
  

2. 关键帧动画keyframe

•             animation: run 1s linear;
              animation-direction: reverse; 
              animation-fill-mode: forwards; 
              animation-iteration-count: infinite;
              animation-play-state: paused; 
          }
          @keyframes run{
              0%{
                  width: 100px;
              }
              50%{
                  width: 800px;
              }
              100%{
                  width: 100px;
              }
          }
  

    - 如果只有初始和结束可以用 from to 代替
  

3. 逐帧动画（关键帧动画的特殊方式，用于无法使用补间动画时）

1. 缺点 资源占用较大

•         .container{
              width: 100px;
              height: 100px;
              border: 1px solid red;
              background: url(./animal.png) no-repeat;
              animation: run 1s infinite;
              animation-timing-function: steps(1);
          }
          @keyframes run{
              0%{
                  background-position: 0 0;
              }
              12.5%{
                  background-position: -100px 0;
              }
              25%{
                  background-position: -200px 0;
              }
  

    - run有补间动画的效果的，所以图片会有移动，因此要加steps(1)，表示两个帧之间的补间只有1