动画的定义
可以使用==@Keyframes来定义动画==，Keyframes表示“关键帧”，在项目上线前，要不上@-webkit-这样的私有前缀
起始状态 from {
transform:rotate(0);
}
结束状态 to {
transform:rotate(360deg);
}
动画的调用
定义动画之后，就可以使用animation属性调用动画
-
animation: r（动画名字） 1s（总时长） linear （缓慢效果） 0s （延迟） 3（第五个参数动画的执行次数）
-
第五个参数为 infinite 时永久执行
-
-
如果想让动画的第2，4，6.。。。（偶数次) 自动逆向执行， 那么要加上alternate参数即可
-
animation: movelr 2s linear 0s infinite alternate；
-
-
如果想让动画停止在最后结束状态，那么加上forwards.
- animation: changeToCircle 1s linear 0s forwards;
多关键帧动画
相当于设置多个断点
` @keyframes changeColor {
0% {
background-color:red;
}
20% {
background-color:yellow;
}
40% {
background-color:blue;
}
60% {
background-color:green;
}
80% {
background-color:purple;
}
100% {
background-color:orange;
}
}`
