CSS动画

1.animation共有8个属性

2.CSS 动画，也称关键帧动画。通过 @keyframes 来定义关键帧。

@keyframes rotate{    
                from{
                         transform: rotate(0deg); 
                        } 
                 to{    
                         transform: rotate(360deg);  
                        }
           }

rotate 是给这个动画起的名字，from 表示最开始的那一帧，to 表示结束时的那一帧。

定义好了关键帧后，下来就可以直接用它

animation: rotate 2s;

animation-name 来指定动画使用的关键帧；

动画运行的时间 animation-duration 为 2s；

动画速度的属性 animation-timing-function 默认值是 ease，即先快后慢。

除了指定开头和结束位置的关键帧（如果不指定 0% 和 100%，浏览器会自动推断），当然也可以指定任意百分比的帧是什么情况，比如开篇例子的另一种实现：

    div {
      width: 100px;
      height: 100px;
      border-radius:50%;
      background-color: red;
      animation: move 2s linear 4 alternate both;
    }
    @keyframes move {
      0%{
        transform: translate(0,0);
      }
      33%{
        transform: translate(200px,0);
      }
      66%{
        transform: translate(0,0);
      }
      100% {
        transform: translate(200px,0);
      }
    }

3.同一元素可以应用多个动画