@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;