animation和keyframes

animation:name duration timing-function delay iteration-count direction;

name:名字

duration: 持续时间

timing-function:速度曲线

delay:延迟时间

iteration-count:循环次数

direction:是否应该轮流反向播放动画

@keyframes animationname { keyframes-selector {css-styles}}

keyframes:关键帧

animationname：声明动画名

keyframes-selector:用来划分动画时长，可用百分比，也可以from 和 to

例：

animation: theanimation 4s inifinite alternate;

@keyframes theanimation{
  0%{0px; left: 0px;background:red}
  100%{top:700px;left:0px;background:green}
}