关键帧动画和过渡动画的区别：
过渡动画: 实现一些简单的动画 只有两个帧开始帧和结束帧的状态 , 只有元素样式发生改变的时候添加过渡效果
关键帧动画 : 实现动画过程当中的每一个关键帧的状态， 关键帧完成之后 ， 使用到任何一个标签上
设置关键帧动画：
- 动画名字
- animation-name: pingyi;
- 动画时间
- animation-duration: 3s;
- 动画的填充方式 动画保持动画结束的状态
- animation-fill-mode: both;
- 动画的速率
- animation-timing-function: linear;
- 动画的延迟时间
- animation-delay: 1s;
- 以上可以写成：
- animation: pingyi 3s;
- 两个必须的属性
- 设置动画：
- 关键帧动画 @keyframes名字
- @keyframes pingyi
- 动画开始帧的状态
- 0% {
left: 0;
top: 0;
}
- 动画结束帧的状态
- 100% {
left: 400px;
top: 400px;
}
- 0% 用 form 替代
- 100% 用 to 替代
- 动画的重复次数
- animation-iteration-count: 1;
- 使用动画 animation 名字 时间 速率 重复次数
- animation: xuanzhuan 3s linear infinite;
- 动画播放状态 running 播放状态;paused 暂停状态
- animation-play-state: paused;
- 动画的方向
- animation-direction: reverse;
关键帧动画
原文：https://www.cnblogs.com/baixuezhemei/p/guanjianzhendonghua.html
