CSS3动画@keyframes

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面，我们将形成连续性画面的任意一张图片称为桢或动画帧，它是构成动画的最小单元，CSS 中专门提供了创建动画帧的属性，并以此为基础在网页中创建动画。

@keyframes 是 CSS 中提供的专门用于定义动画关键帧的语法词

 <style>

/* 关键帧序列 */

@keyframes move {

from { width: 200px; height: 100px; }

to { width: 300px; height: 150px; }

}

</style>

1. from 和 to 分别为动画的关键帧
2. 允许使用百分比定义关键帧，from 相当于 0%，to 相当于 100%
3. 多个关键帧的组合叫做动画序列，每个序列都要有一个名称
4. 关键帧中定义大部分普通的 CSS 样式

@keyframes 用来定义动画序列，animation 属性用来为标签盒子引用动画序列，同一个动画序列可以被多个标签盒子引用。

1、anmation-name：名字

2、animation-duration ：时长

3、animation-delay：延时

4、animation-fill-mode：结束状态

• forwards 动画结束时，保持最后一帧的样式
•  backwards 动画结整时，恢复标签盒子原本的样式，该值为默认值

5、animation-timimg-function：速度曲线

• linear：匀速
• ease：逐渐慢下来
• ease-in：加速
• ease-out：减速
• ease-in-out：先加速后减速

6、animation-iteration-count:重复执行

• infinite ：动画无限循环执行
• 默认为 1 次认为 1 

7、animation-direction:单独指定是否逆向执行

8、animation-play-state:动画是否暂停

• paused ：动画暂停
  
• running:动画继续

animation:名字+时长+延时+结束状态+速度曲线+重复执行

CSS3动画@keyframes

原文：https://www.cnblogs.com/shixiaokeng/p/13751874.html