@keyframes规则

@keyframes规则

用来规定动画。使用需要捆绑到某个选择器上，才会产生动画效果。
必须规定动画的名称和时长。

用法

1. 定义一个名为myfirst的动画：
   @keyframes myfirst {
   from{
   background-color:red;
   }
   to{
   background-color:blue;
   }
   }

2. 把“myfirst”动画绑定到div元素上
   div{
   animation:myfirst 5s;
   }

3. 规定时间的方法
   用百分比来规定变化的时间，from=0%，to=100%；0%是动画的开始，100%是动画的完成。

@keyframes规则和所有动画属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写，除了animation-play-state
animation-name	规定@keyframes动画的名称
animation-duration	规定动画完成一个周期所花费的时间，默认0
animation-timing-function	规定动画的速度曲线，默认“ease”
animation-delay	规定动画何时开始，默认0
animation-iteration-count	规定动画被播放的次数，默认是1
animation-direction	规定动画是否在下一个周期逆向播放
animation-play-state	规定动画是否在运行或暂停
animation-fill-mode	规定对象动画时间之外的状态