什么是动画

想要弄懂动画如何实现，首先我们要知道什么是动画

动画是从一种状态转变为另一个状态的过程，我们看动画片的时候人物的行动过程就是一个动画。这就涉及到了另个名词帧率
我们把一个过程分为起始状态和结束状态，他们中间无数个小时间节点就是帧，每一帧有每一个状态。这些状态在一定的时间内连续执行就形成了动画。

@keyframes 名称{
0% | from{ //开始
样式；
}
100% | to{ //结束
样式;
}
}

注意声明动画写在css里，这段代码的意思是
当动画为 25% 时改变背景色为黄色 ，50% 时改变背景色为蓝色，然后当动画 100% 完成时再次改变为绿色 注意：动画完成后改变为红色（初始状态）
最后我们给一个div调用这个声明的动画并给它时间（动画要播放的时间长度）
如何定义动画
@keyframes name{ //name是自义定命名
0% {background: red;} //最开始的展示背景颜色
25% {background: yellow;}
50% {background: blue;}
100% {background: green;} //结束的背景颜色
}

绑定的动画名称
animation-name:name

动画一个周期的时长 :单位s
animation-duration:3s 三秒

速度时间曲线函数
animation-timing-function

延迟时间
animation-delay

播放次数: 默认是1次
animation-iteration-count :infinite 重复播放

播放方向:
animation-direction:{
alternate 轮流播放
reverse 逆向
normal 正常
}

动画播放前后的填充状态
animation-fill-mode:{
none ：默认
forwards ：动画完成后，保持在最后一个帧的状态上
backwards：动画播放前（延迟时间内），保持在第一个帧的状态上
both:具备 forwards 和 backwards 的状态
}

animation-play-state:{
paused ： 暂停
running ： 播放
}
简写
animation：name duration timing-function delay iteration-count direction