@keyframes关键帧动画（animation）

@keyframes关键帧animation：

首先需要定义一套关键帧，关键帧的定义方式比较特殊，它使用了关键字@keyframes来定义动画。这里可以用from{}to{}或者用百分比充当时间点。具体格式为：

然后，在需要设置动画的相应的标签里，调用动画就可以了

比如需要给div添加动画效果：

div{

animation：1s 2s 动画名称 运动方式 动画执行的次数

}

解释：

第一个值：运动的总时间

第二个值：延迟的动画时间，单位是秒或者毫秒

第三个值：动画名称

第四个值：运动方式

第五个值：动画执行的次数

animation是所有动画属性的简写，除了animation-play-state属性

注意：为了达到最佳的浏览器兼容效果，在实际书写代码的时候，还必须加上各大浏览器的私有前缀

最后，依次解释一下动画的各个属性

/*动画名称*/

-webkit-animation-name: run;

/*动画时长*/

默认：0；

animation-duration: 1s;

/*动画速度曲线*/

animation-timing-function: linear;

linear 匀速

ease 先慢后快，默认

ease-in 慢速开始

ease-out 慢速结束

ease-in-out 开始和结束都慢

cubic-bezier 贝塞尔曲线 推荐工具：

/*动画延迟几秒之后执行,可以为负数*/

animation-delay: 0s;

/*动画的次数*/

可以具体的数值，也可以说是无限次 infinite

infinite无限执行

animation-iteration-count: infinite;

/*动画是否在下一周期逆向的播放*/

nomal正常的，默认

reverse反向的、

alternate单数正向，偶数反向、

alternate-reverse单数反向，偶数正向

animation-direction: alternate;

/*动画开始之前或者结束之后所在的位置*/

forwards动画在结束之后停留在to的位置（最后一帧）

backwards动画在延迟期间会停留在from的位置（第一帧）

both以上两种情况都有

nomal默认没有

animation-fill-mode: forwards;

/*动画的播放状态*/（写在hover里面是为了不让其影响平时的状态）

paused暂停

running运行，默认

animation-play-state:paused;