想要弄懂动画如何实现，首先我们要知道什么是动画
动画是从一种状态转变为另一个状态的过程，我们看动画片的时候人物的行动过程就是一个动画。这就涉及到了另个名词帧率 我们把一个过程分为起始状态和结束状态，他们中间无数个小时间节点就是帧，每一帧有每一个状态。这些状态在一定的时间内连续执行就形成了动画。
@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
