keyframes被称为关键帧
主要以@keyframes开头
Chrome和 Safari 需要前缀 -webkit-;Foxfire 需要前缀 -moz-
animation-name: 动画的名称
animation-duration:动画所持续的时间长
animation-timing-function:动画的播放方式
animation-delay:动画延迟的时间
animation-iteration-count:动画的播放次数,一般是正数,如果设置infinite则无限循环
animation-direction:动画播放方向,两个值(normal、alternate)alternate,动画播放在第偶数次向前播放,第奇数次向反方向播放
animation-play-state:控制元素动画的播放状态running和paused
animation-fill-mode:在动画开始之前和结束之后发生的操作(backwards会在动画开始前显示动画的第一帧,例如当动画是在页面加载完成后5秒开始,动画是由红色渐变为绿色,而div本来的背景色是黑色。那么设置backwards属性会使得在动画尚未开始的前五秒div显示为红色,而设置none的话,前五秒会div会显示自己的背景色黑色)