关键帧动画

关键帧动画和过渡动画的区别：

---

过渡动画: 实现一些简单的动画 只有两个帧开始帧和结束帧的状态 , 只有元素样式发生改变的时候添加过渡效果

关键帧动画 : 实现动画过程当中的每一个关键帧的状态， 关键帧完成之后 ， 使用到任何一个标签上

设置关键帧动画：

• 动画名字
• 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;